Cookie Consent
A bottom consent card with equal-weight Accept and Reject, Customise to expand category switches, and an onChange callback as its only effect.
Preview
Pebble Journal
How we cut our token set from 214 to 61 values, and what we kept.
Cookies, briefly
We use a few cookies to keep you signed in and, if you allow it, to learn what to improve. Cookie policy
Cookies, briefly
We use a few cookies to keep you signed in and, if you allow it, to learn what to improve. Cookie policy
Sign-in, security and your settings. The site can’t work without these.
Remember your theme, language and layout between visits.
Anonymous usage counts that tell us which pages help.
Measure campaigns and show relevant offers elsewhere.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| categories | ConsentCategory[] | defaultCategories | { id, label, description?, required? }. Required ones are always on. |
| defaultChoices | Record<string, boolean> | all off | Starting switch positions, e.g. a saved choice. |
| onChange | (choices, action: "accept" | "reject" | "save") => void | — | The only effect. Persist the choice here; nothing is stored internally. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / true / — | Visibility. A choice closes the card. |
| defaultCustomising | boolean | false | Start with the category switches showing. |
| title / description / policyHref | ReactNode / ReactNode / string | short defaults / "#cookies" | Copy and the policy link. |
| className | string | — | Position the card, e.g. fixed inset-x-4 bottom-4. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.