# Consent Sheet

Privacy-first consent sheet for cookies, tracking and data sharing. Optional categories start off, Reject all sits as an equal beside Accept all, and per-category toggles let people choose what to allow.

> Composed · Pro · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/consent-sheet
```

## Import

```tsx
import { ConsentSheet } from "@/components/ui/consent-sheet/consent-sheet";
```

## Variants

- `compact` — Single question: `npx @lumioui/cli add pro/consent-sheet-compact`
- `cookies` — Cookie consent: `npx @lumioui/cli add pro/consent-sheet-cookies`
- `settings` — Privacy settings: `npx @lumioui/cli add pro/consent-sheet-settings`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` | Controlled open state (sheet presentation). |
| `defaultOpen?` | `boolean` | Uncontrolled initial open state. Default false. |
| `onOpenChange?` | `(open: boolean) => void` | Fires when the sheet opens or closes. |
| `presentation?` | `"sheet" | "inline"` | "sheet" — modal bottom sheet. "inline" — the same panel embedded in a  page (privacy settings), always expanded, never closes. Default "sheet". |
| `title?` | `string` | Heading. Default "Your privacy choices". |
| `description?` | `string` | Body copy under the heading. |
| `categories?` | `ConsentCategory[]` | Consent categories. Leave empty for a simple yes/no prompt. |
| `value?` | `ConsentChoices` | Controlled choices (category id → granted). |
| `defaultValue?` | `ConsentChoices` | Uncontrolled initial choices. Default: required on, everything else off. |
| `onValueChange?` | `(choices: ConsentChoices) => void` | Fires on every switch flip. |
| `onDecision?` | `(choices: ConsentChoices, action: ConsentAction) => void` | Fires once with the final choices when the person decides. |
| `expanded?` | `boolean` | Controlled "manage choices" expansion. |
| `defaultExpanded?` | `boolean` | Uncontrolled initial expansion. Default false. |
| `onExpandedChange?` | `(expanded: boolean) => void` | Fires when the category list unrolls or folds. |
| `rejectLabel?` | `string` | Labels. |
| `acceptLabel?` | `string` | — |
| `saveLabel?` | `string` | — |
| `manageLabel?` | `string` | — |
| `requiredLabel?` | `string` | Badge text on required rows. Default "Always on". |
| `policyLabel?` | `string` | Link under the body copy — "Privacy policy". |
| `onPolicyPress?` | `() => void` | — |
| `icon?` | `React.ComponentProps<typeof Icon>["name"]` | Leading glyph in a tinted disc above the title. |
| `dismissible?` | `boolean` | Allow closing by backdrop tap / back button without a decision. Default false. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-down` — /icons.html?i=chevron-down

Source: https://lumioui.com/components/consent-sheet