#What is Shadcn Cookie Consent?

Shadcn Cookie Consent is a free, open-source React component by Rahul Rajput (@r2hu1), designed to extend shadcn-ui with a customizable, GDPR-compliant cookie consent banner. It’s ideal for developers building websites needing to comply with EU GDPR or CCPA regulations, such as e-commerce platforms, blogs, or SaaS apps, in Next.js or React projects.

Built with React, TypeScript, Tailwind CSS, shadcn-ui, and lucide-react, it offers three design variants (default, small, minimal), customizable accept/decline callbacks, and dark mode support. The component integrates via shadcn CLI or as an NPM package (Shadcn Cookie Consent), ensuring seamless alignment with shadcn-ui’s accessible, polished design.

#Features ⚡️

• Three Variants:

  • Default: Full-width banner with detailed text and buttons.

  • Small: Compact layout with rounded buttons.

  • Minimal: Unobtrusive notification for subtle integration.

• Customizable Callbacks: Define actions for onAcceptCallback and onDeclineCallback.

• Cookie Storage: Sets cookieConsent=true on acceptance, persists until 9999.

• Dark Mode Support: Adapts to shadcn-ui’s light/dark themes.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance.

• Responsive Design: Tailwind CSS ensures adaptability across devices.

#Pros and Cons

#Pros ✅

• shadcn-ui Compatibility: Matches shadcn-ui’s aesthetic and accessibility standards.

• Free and Open-Source: MIT license allows unrestricted use and customization.

• GDPR Compliance: Clear accept/decline options meet EU GDPR and CCPA requirements.

• Flexible Variants: Default, small, and minimal styles suit varied design needs.

• Community Traction: 159 GitHub stars and active X posts (June 2025).

#Cons ⚠️

• React Dependency: Limited to React/shadcn-ui ecosystems.

• Setup Requirements: Needs shadcn-ui, Tailwind CSS, and dependencies like lucide-react.

• Client-Side Storage: Stores consent in cookies; server-side logic requires custom implementation.

• Limited Customization: Text customization via props is supported but may need CSS overrides for advanced styling.

• No Auto-Storage Logic: Developers must handle cookie storage in callbacks.

#Included Components

• CookieConsent: Main component rendering the consent banner with variant support.

• Button: shadcn-ui buttons for accept/decline actions.

• CookieIcon: lucide-react icon for visual enhancement.

#Pricing 💸

Shadcn Cookie Consent is completely free under the MIT license, with no premium tiers.

#Integrations 🧰

• React: Core framework for the component.

• shadcn-ui: Provides accessible primitives (Button, etc.).

• Tailwind CSS: Utility-first styling for responsive design.

• Next.js: Optimized for Next.js projects (v14.2.5).

• TypeScript: Ensures type safety.

• lucide-react: Icon library for the cookie icon.

• react-hook-form (optional): Supports form integration for advanced use.