A favicon of Shadcn Cookie Consent

Shadcn Cookie Consent

Implement compliant, visually appealing cookie consent banners using this Shadcn UI and Tailwind CSS component, enhancing user experience with ease.

A screenshot of Shadcn Cookie ConsentVisit

Integrate Shadcn UI Cookie Consent Banner into Your Web Project

This Shadcn Cookie Consent component offers a straightforward way to add a beautifully designed and customizable cookie consent banner to your website. Built with the popular Shadcn UI and Tailwind CSS, it ensures a seamless integration with modern web aesthetics. It helps developers comply with cookie regulations by providing clear options for users to accept or decline cookies, enhancing user trust and experience without compromising on design quality. Easily implement this component in your React or Next.js projects.

Features:

  • Component-Based: Provides a reusable React component for cookie consent.
  • Shadcn UI Integration: Built on top of the Shadcn UI library for a consistent look and feel.
  • Tailwind CSS Styling: Utilizes Tailwind CSS for extensive styling flexibility and customization.
  • Multiple Variants: Offers 'default' and 'small' display variants to suit different UI needs.
  • Accept/Decline Options: Clear buttons for users to accept or decline cookie usage.
  • Callback Hooks: Includes onAcceptCallback and onDeclineCallback for executing custom logic after user interaction.
  • Persistent Choice: Remembers user consent via a browser cookie (cookieConsent=true).
  • Animated Transitions: Smooth animations for showing and hiding the consent banner.
  • Client-Side Rendering: Designed as a client component (e.g., for Next.js applications using "use client").
  • Customization Support: Allows developers to modify CSS, Tailwind configuration, and Shadcn themes.
  • Demo Mode: A demo prop is available to showcase the banner regardless of prior consent, useful for development and testing.
  • Responsive Design: Adapts to different screen sizes, positioned at the bottom of the screen.

Summary:

Shadcn Cookie Consent is a developer-focused React component for implementing cookie consent banners. It leverages Shadcn UI and Tailwind CSS to deliver a visually appealing, customizable, and user-friendly solution. With features like multiple variants, callbacks for user actions, and easy integration, it streamlines the process of adding essential cookie compliance functionality to web applications, ensuring both regulatory adherence and a positive user experience on your site.

Distribution:
opensource
GitHub:
174 Stars
7 Forks
Share:

 

  
 

Similar to Shadcn Cookie Consent: