# Cookie Preferences

Choose which optional cookies run. A popover on Web and a bottom sheet on Mobile.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/cookie-preferences
```

## Usage

```tsx
import { CookiePreferences } from '@/components/fetaui/cookie-preferences'

export function Example() {
  const [open, setOpen] = useState(false)
  return <CookiePreferences open={open} onOpenChange={setOpen} onSave={storeChoices} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| open | boolean | required |
| onOpenChange | (open) => void | required |
| onClosed | () => void |  |
| title | ReactNode | Cookie preferences |
| description | ReactNode |  |
| categories | CookieCategory[] |  |
| defaultValue | string[] |  |
| onSave | (choices) => Promise<void> | void |  |
| animated | boolean | true |
| CookiePreferencesPanel | The panel alone, with saving, onClose and focusCategory |  |

## When to use

- From Customize on Cookie Banner.
- From a footer link, so people can change their choice later.

## When not to use

- For the first ask alone: use Cookie Banner.

## 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.