Cookie Preferences Dialog
Dialogs
Source and install need .
pnpm dlx shadcn@latest add @assembli/cookie-bannerCookie Banner
A cookie consent banner where both answers weigh the same: Accept all and Reject all are identical buttons side by side. Customize opens the categories in place, each with a description, a switch (strictly necessary stays locked on) and its vendors under a disclosure, then Save choices. A corner card or a bottom bar that slides in with CSS. Also exports CookieSettingsButton to reopen it.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
variant
"card" | "bar"
Default
"card"A card in the corner, or a bar across the bottom.
categories
CookieCategory[]
Default
DEFAULT_COOKIE_CATEGORIESopen
boolean
defaultOpen
boolean
Default
trueonOpenChange
(open: boolean) => void
value
CookieConsent | null
Default
nullThe visitor's saved choice, if they made one. When the banner reopens with a saved choice (from
CookieSettingsButton, say), it starts on the categories with their switches as saved.onConsent
(consent: CookieConsent, method: CookieConsentMethod) => void
Store this (a cookie or your consent platform) and stop showing the banner.
policyHref
string
title
React.ReactNode
Default
"We value your privacy"description
React.ReactNode
Default
"We use cookies to keep the site working and, with your per…strategy
"fixed" | "absolute"
Default
"fixed"fixedto the viewport, orabsoluteinside a positioned parent.align
"start" | "end"
Default
"start"Which corner the card sits in.
| Description | |||
|---|---|---|---|
| variant | "card" | "bar" | "card" | A card in the corner, or a bar across the bottom. |
| categories | CookieCategory[] | DEFAULT_COOKIE_CATEGORIES | |
| open | boolean | – | |
| defaultOpen | boolean | true | |
| onOpenChange | (open: boolean) => void | – | |
| value | CookieConsent | null | null | The visitor's saved choice, if they made one. When the banner reopens with a saved choice (from |
| onConsent | (consent: CookieConsent, method: CookieConsentMethod) => void | – | Store this (a cookie or your consent platform) and stop showing the banner. |
| policyHref | string | – | |
| title | React.ReactNode | "We value your privacy" | |
| description | React.ReactNode | "We use cookies to keep the site working and, with your per… | |
| strategy | "fixed" | "absolute" | "fixed" |
|
| align | "start" | "end" | "start" | Which corner the card sits in. |
