shadcn/ui cookies

Sleek and flexible cookie consent component, designed with shadcn/ui.

Installation

To install the package, run the following command:

npx shadcn@latest add http://shadcn-cookies.vercel.app/r/cookie-consent.json

Usage

The CookieConsent component provides a simple way to handle cookie consent in your application. It supports multiple variants (default, small, minimal) and allows you to execute custom functions when users accept or decline cookies.

Default

import { CookieConsent } from "@/components/ui/cookie-consent"

export default function Page() {
  return (
    <CookieConsent 
      variant="default"
      onAcceptCallback={() => {
        // Handle accept
      }}
      onDeclineCallback={() => {
        // Handle decline
      }}
    />
  )
}

Small

import { CookieConsent } from "@/components/ui/cookie-consent"

export default function Page() {
  return (
    <CookieConsent 
      variant="small"
      onAcceptCallback={() => {
        // Handle accept
      }}
      onDeclineCallback={() => {
        // Handle decline
      }}
    />
  )
}

Minimal

import { CookieConsent } from "@/components/ui/cookie-consent"

export default function Page() {
  return (
    <CookieConsent 
      variant="minimal"
      onAcceptCallback={() => {
        // Handle accept
      }}
      onDeclineCallback={() => {
        // Handle decline
      }}
    />
  )
}

Contributing

We welcome contributions to improve shadcn/ui cookies!

How to Contribute

1. Fork the Repository - Click the "Fork" button at the top right of this page.
2. Clone Your Fork - Run the following command in your terminal:

git clone https://github.com/kaizenics/shadcn-cookies.git
cd shadcn-cookies

3. Create a New Branch - Name it something relevant. e.g., feature-minimal-variant or variant-minimal-added:

git checkout -b feature-minimal-variant

4. Make Your Changes - Implement your improvements or fixes.
5. Commit & Push

git add .
git commit -m "feat: added new cookie consent variant"
git push origin feature-minimal-variant

6. Open a Pull Request - Go to original repo, click "New Pull Request", and select your branch.

Demo

• Live Demo