## Cookie Consent (S—110)

A compact cookie card with Accept / Reject and a Customise view where each category has its own switch.

- URL: https://sundaeui.dev/components/cookie-consent
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json`
- Tags: gdpr, consent, cookie, switch, banner, privacy

Accept all and Reject all are equal weight, as regulators expect. Customise expands the card in place into category switches with one-line explanations; Necessary is locked on.
Saving collapses it to a small confirmation that fades away.

### Usage

```tsx
import { CookieConsent } from '@/components/sundae/cookie-consent'

<CookieConsent />
```

### Props

- `categories` (`{ id: string; label: string; hint: string; locked?: boolean }[]`, required): Categories.
- `onSave` (`(enabled: string[]) => void`): Called with enabled category ids.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- First visit on sites that set non-essential cookies.

### When not to use

- Sites with only essential cookies: no banner is needed.

### Accessibility

- A labelled region (not a modal) so it never traps focus.
- Switches are role="switch" buttons with aria-checked; the locked one is aria-disabled.
- Reduced motion removes the movement and keeps every state change.