# Bottom Cookie Bar

> Cookie consent bar fixed to the bottom of the page with accept all and decline buttons and a cookie policy link.

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

- Page, with a live preview: https://shadcn.exchange/r/7ovr/cookie-consent-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/cookie-consent-1-light-7ce685d7381e6af3.png
- Registry item: https://7ovr.com/r/cookie-consent-1.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-1.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: `button`

## Files

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

```tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"

export default function CookieConsentBlock() {
  const [visible, setVisible] = React.useState(true)

  if (!visible) return null

  return (
    <div className="fixed inset-x-0 bottom-0 z-50 border-t border-border bg-background">
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm text-muted-foreground">
          We use cookies to improve your experience and analyze traffic. Read
          our{" "}
          <a
            href="#"
            className="font-medium text-foreground underline underline-offset-4 hover:text-foreground/80"
          >
            cookie policy
          </a>
          .
        </p>
        <div className="flex shrink-0 items-center gap-2">
          <Button
            variant="outline"
            onClick={() => setVisible(false)}
            className="flex-1 sm:flex-none"
          >
            Decline
          </Button>
          <Button
            onClick={() => setVisible(false)}
            className="flex-1 sm:flex-none"
          >
            Accept all
          </Button>
        </div>
      </div>
    </div>
  )
}
```