A consent card with Accept all, Reject non-essential and a Customize panel of category switches. It slides up on mount.
Pick which cookies you want to allow.
npx shadcn@latest add https://hyperblur.dev/r/cookie-banner.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cookie-banner.tsx.
import { CookieBanner } from "@/components/hyperblur/cookie-banner"
<CookieBanner placement="bottom-left" onChange={(prefs) => console.log(prefs)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "We value your privacy" | Heading of the card. |
| description | string | "We use cookies to run the site and understand how it is used. Choose what you allow." | Short explanation under the heading. |
| placement | "bottom-left" | "bottom-center" | "inline" | "inline" | Inline renders in the page flow. The bottom placements fix the card to the viewport. |
| defaultPreferences | { analytics?: boolean; marketing?: boolean } | {} | Initial state of the optional category switches. Necessary is always on. |
| onChange | (preferences: { necessary: true; analytics: boolean; marketing: boolean }) => void | Called once when the user accepts, rejects or saves custom choices. | |
| policyHref | string | When set, adds a Cookie policy link after the description. | |
| accent | string | "#2f7bff" | Color of the primary button, the switches and the focus rings. |