Choose which optional cookies run. A popover on Web and a bottom sheet on Mobile.
Preview
npx shadcn add @fetaui/cookie-preferencesCookie preferences
Choose which optional cookies we can use. You can change this any time.
- Always on
Strictly necessary
Sign in, security and your cart. The site can't work without these.
Preferences
Remember your language, region and display settings.
Analytics
Count visits and see which pages help, only in aggregate.
Marketing
Measure campaigns and show relevant ads on other sites.
Cookie preferences
Choose which optional cookies we can use. You can change this any time.
- Always on
Strictly necessary
Sign in, security and your cart. The site can't work without these.
Preferences
Remember your language, region and display settings.
Analytics
Count visits and see which pages help, only in aggregate.
Marketing
Measure campaigns and show relevant ads on other sites.
Cookie preferences
Choose which optional cookies we can use. You can change this any time.
- Always on
Strictly necessary
Sign in, security and your cart. The site can't work without these.
Preferences
Remember your language, region and display settings.
Analytics
Count visits and see which pages help, only in aggregate.
Marketing
Measure campaigns and show relevant ads on other sites.
Cookie preferences
Choose which optional cookies we can use. You can change this any time.
- Always on
Strictly necessary
Sign in, security and your cart. The site can't work without these.
Preferences
Remember your language, region and display settings.
Analytics
Count visits and see which pages help, only in aggregate.
Marketing
Measure campaigns and show relevant ads on other sites.
Installation
npx shadcn add @fetaui/cookie-preferences
Accessibility
- A native modal dialog, so focus stays inside and returns to Customize on close.
- Switches use role switch, named by the category with the description linked.
- Strictly necessary is a text chip, not a disabled switch.
Motion
- The popover fades in and scales from 0.98 in 180 ms.
- The sheet slides up in 280 ms on Mobile.
- Switches change nothing until Save.
- Save shows the loader and every action holds until the request returns.
- With reduced motion, the thumb jumps and the panel appears.
Responsive behavior
- 420 px popover on Web and 358 px bottom sheet with a grabber on Mobile.
- On Mobile, Save sits above Reject all and Accept all.
Performance
- The panel mounts only while open, and unmounts after the close animation.
- Open and close use the Web Animations API on opacity and transform.
- It runs on the native dialog element, so no focus trap code ships.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import CookiePreferences from @/components/fetaui/cookie-preferences. Use CookiePreferencesPanel to place the panel in a page.
- Control it with open and onOpenChange. onSave gets locked ids plus the chosen ones, and it closes once the promise resolves.
- Optional cookies start off. Pass defaultValue only with choices the person already made.
- Set locked only on categories the site cannot run without. Composes Button, Icon Button and Switch.