# Cookie notice (goodtabs UI)

A small notice with two real choices of equal weight and no dark patterns.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/cookie-notice.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/cookie-notice`

## Usage

```tsx
import { CookieNotice } from "@/components/ui/cookie-notice"

<CookieNotice
  className="fixed right-4 bottom-4"
  description="We use one cookie to count visits."
  onAccept={() => enableAnalytics()}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| description | `ReactNode` |  | What is collected and why, in plain words. |
| title | `string` | `"Cookies on this site"` | The heading. |
| acceptLabel | `string` | `"Accept all"` | Label of the accepting choice. |
| rejectLabel | `string` | `"Reject all"` | Label of the declining choice. |
| layout | `"stacked" | "bar"` | `"stacked"` | stacked is a small card; bar is a row from sm up. |
| onAccept | `() => void` |  | Runs when they accept, then the notice closes. |
| onReject | `() => void` |  | Runs when they decline, then the notice closes. |

## When to use

- Sites that set non-essential cookies and need a consent choice
- Anywhere declining must be as easy as accepting

## When not to use

- Granular consent by category; this offers two choices only
- Sites that set only essential cookies, which need no notice

## Notes for agents

- Both buttons use variant secondary and the same size on purpose; do not restyle one to lead
- Persist the choice yourself in onAccept and onReject, and only mount the notice when no choice is stored
- It renders in flow; position it with className, for example fixed right-4 bottom-4
- There is no close button, so dismissal always records a choice

Docs: https://ui.goodtabs.co/components/cookie-notice