# Cookie Banner

Asks once at the bottom of the page. Reject all and Accept all carry the same weight.

Tier: Free

## Installation

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

## Usage

```tsx
import { CookieBanner } from '@/components/fetaui/cookie-banner'

export function Example() {
  return <CookieBanner onChoose={storeChoices} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| message | ReactNode |  |
| compact | boolean | false |
| compactMessage | ReactNode | We use cookies. |
| policyHref | string | # |
| fixed | boolean | true |
| categories | CookieCategory[] |  |
| defaultChoices | string[] |  |
| onChoose | (choices) => Promise<void> | void |  |
| savedHold | milliseconds | 4000 |
| onHidden | () => void |  |
| animated | boolean | true |

## When to use

- On the first visit, before any optional cookie loads.
- With a footer link that reopens Cookie Preferences.

## When not to use

- To push a choice: keep Reject all as easy to find and press as Accept all.
- For sites that set only strictly necessary cookies.

## Accessibility

- A region named Cookie consent. It does not trap focus.
- Saved is announced as a status.
- Customize opens Cookie Preferences, which returns focus here on close.

## Motion

- Rises 16 px and fades in over 240 ms.
- Nothing bounces or pulses to pull a choice out of anyone.
- Saved crossfades in 200 ms and hides after 4 s.
- Leaves in 180 ms.
- With reduced motion, it does not rise or move.