# Cookie Preferences Panel

> Cookie preferences panel with switches for necessary, analytics, and marketing categories, plus save preferences and reject all buttons.

A shadcn/ui block from the [@7ovr](https://7ovr.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/7ovr/cookie-consent-3).

- Page, with a live preview: https://shadcn.exchange/r/7ovr/cookie-consent-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/cookie-consent-3-light-cb5afd408ed472f8.png
- Registry item: https://7ovr.com/r/cookie-consent-3.json
- Categories: cookie-consent
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/cookie-consent-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@base-ui/react`
- Registry items: `badge`, `button`, `separator`, `switch`

## Files

### `registry/blocks/cookie-consent/3/cookie-consent-block.tsx`

```tsx
"use client"

import * as React from "react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"

export default function CookieConsentBlock() {
  const [analytics, setAnalytics] = React.useState(true)
  const [marketing, setMarketing] = React.useState(false)

  return (
    <div className="flex w-full items-center justify-center bg-background p-6 text-foreground">
      <div className="w-full max-w-md rounded-lg border border-border bg-background p-6">
        <h2 className="font-heading text-lg font-semibold text-foreground">
          Cookie preferences
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          Manage how we use cookies to improve your experience. You can change
          these settings at any time.
        </p>

        <div className="mt-6 flex flex-col gap-4">
          <div className="flex items-start justify-between gap-4">
            <div>
              <div className="flex items-center gap-2">
                <label
                  htmlFor="cookie-necessary"
                  className="text-sm font-medium text-foreground"
                >
                  Necessary
                </label>
                <Badge variant="secondary" className="px-1.5 text-[10px]">
                  Always on
                </Badge>
              </div>
              <p className="text-sm text-muted-foreground">
                Required for the site to function
              </p>
            </div>
            <Switch id="cookie-necessary" checked disabled />
          </div>

          <Separator />

          <div className="flex items-start justify-between gap-4">
            <div>
              <label
                htmlFor="cookie-analytics"
                className="text-sm font-medium text-foreground"
              >
                Analytics
              </label>
              <p className="text-sm text-muted-foreground">
                Helps us understand how visitors use the site
              </p>
            </div>
            <Switch
              id="cookie-analytics"
              checked={analytics}
              onCheckedChange={(checked) => setAnalytics(checked)}
            />
          </div>

          <Separator />

          <div className="flex items-start justify-between gap-4">
            <div>
              <label
                htmlFor="cookie-marketing"
                className="text-sm font-medium text-foreground"
              >
                Marketing
              </label>
              <p className="text-sm text-muted-foreground">
                Used to deliver personalized ads and offers
              </p>
            </div>
            <Switch
              id="cookie-marketing"
              checked={marketing}
              onCheckedChange={(checked) => setMarketing(checked)}
            />
          </div>
        </div>

        <div className="mt-6 flex items-center gap-2">
          <Button>Save preferences</Button>
          <Button variant="outline">Reject all</Button>
        </div>
      </div>
    </div>
  )
}
```