# Consent Card

Asks once whether analytics may run, then folds to a one line confirmation.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/consent-card
```

## Usage

```tsx
import { ConsentCard } from '@/components/fetaui/consent-card'

export function Example() {
  return <ConsentCard placement="corner" onValueChange={saveChoice} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value | asking, accepted, declined |  |
| defaultValue | asking, accepted, declined | asking |
| onValueChange | (value) => void |  |
| onDismiss | () => void |  |
| title | ReactNode | Cookies |
| description | ReactNode |  |
| acceptLabel | string | Accept |
| declineLabel | string | Decline |
| acceptedTitle | ReactNode | Analytics on |
| declinedTitle | ReactNode | Analytics off |
| note | ReactNode |  |
| hideAfter | number, in ms, 0 keeps it | 4000 |
| placement | inline, corner | inline |
| animated | boolean | true |

## When to use

- For one yes or no about analytics, asked once.
- Bottom left on Web and docked on Mobile, with `placement="corner"`.

## When not to use

- For a full cookie choice with categories: use Cookie Banner and Cookie Preferences.
- For anything that blocks the page: use Alert Dialog.

## Accessibility

- A labelled region, not a dialog, so it does not trap focus.
- After an answer, focus moves to the Close Button on the confirmation, which is announced as a status.
- Decline stays as easy to reach as Accept.

## Motion

- Rises 12 px and fades in over 240 ms.
- An answer folds the card to one line with a spring.
- Hides itself after 4 s.
- With reduced motion, it only fades.