#What is Shadcn/ui Cookies?

Shadcn/ui Cookies is a free, open-source React component by kaizenics, designed to extend shadcn-ui with a 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 a clean, modern UI. The component integrates via shadcn CLI, ensuring seamless alignment with shadcn-ui’s accessible design.

#Features ⚡️

• Three Variants:

  • Default: Full-width banner with detailed text, “Learn more” link, and buttons.

  • Small: Compact layout with rounded buttons and simplified content.

  • Minimal: Unobtrusive notification for a subtle consent prompt.

• Customizable Callbacks: Define actions via onAcceptCallback and onDeclineCallback.

• Cookie Storage: Sets cookieConsent=true with a far-future expiry (9999) on acceptance.

• 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: Provides clear accept/decline options for regulatory adherence.

• Flexible Variants: Default, small, and minimal styles cater to different design needs.

• Easy Integration: CLI setup streamlines adoption in shadcn-ui projects.

#Cons ⚠️

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

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

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

• Limited Text Customization: Message text requires prop overrides or component modification.

• 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/ui Cookies 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.

• TypeScript: Ensures type safety.

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