A cookie consent card or bottom bar with a segmented dial that counts the enabled categories, a Customize panel that expands in place with switches and vendor lists, and a small launcher with a receipt id after saving.
npx shadcn@latest add https://hyperblur.dev/r/popup-cookie-preferences.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-cookie-preferences.tsx.
import { PopupCookiePreferences } from "@/components/hyperblur/popup-cookie-preferences"
<PopupCookiePreferences onConsent={(choices) => saveConsent(choices)} />| Prop | Type | Default | Description |
|---|---|---|---|
| categories | PopupCookieCategory[] | Necessary, Preferences, Analytics, Marketing | { id, label, description, required?, defaultEnabled?, vendors?: { name, duration }[] }. Required categories are locked on. |
| layout | "card" | "bar" | "card" | Floating card in the bottom left corner or a full-width bottom bar. |
| title | string | "We use cookies, sparingly" | Heading. |
| description | string | Short consent copy | Body text before the policy link. |
| policyHref | string | "#cookies" | Link to the cookie policy. |
| defaultOpen | boolean | true | Show the banner at first. When false only the launcher is shown. |
| onConsent | (choices: Record<string, boolean>) => void | Called by Accept all, Reject all and Save choices with the final state per category. | |
| embedded | boolean | false | Render in normal flow instead of fixed to the viewport. |
| accent | string | "#c08a4a" | Dial, switches and focus color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |