# Banner Cookie Consent — React Banner Component

> A corner consent card whose preferences panel unfolds with spring height, with real switches per category and a chip to reopen it after a choice.

- Category: [Banners](https://pixelpapa.com/components/banners.md)
- Tags: banner, cookie, consent, preferences, switch
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/banners/banner-cookie-consent

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/banner-cookie-consent
```

The file is written to `components/pixelpapa/banner-cookie-consent.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/banners/banner-cookie-consent.

## AI prompt

```text
Add the "Banner Cookie Consent" component from PixelPapa UI to this project.

What it is: A corner consent card whose preferences panel unfolds with spring height, with real switches per category and a chip to reopen it after a choice.
Category: Banners. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/banner-cookie-consent
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/banner-cookie-consent.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/banner-cookie-consent.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/banner-cookie-consent" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More banners

- [Banner Announcement Marquee](https://pixelpapa.com/components/banners/banner-announcement-marquee.md): A top strip that scrolls a seamless loop of announcements between faded edges, pauses on hover or focus and collapses when dismissed.
- [Banner Countdown Sale](https://pixelpapa.com/components/banners/banner-countdown-sale.md) (Pro): A sale strip with a ticking countdown whose digits roll over, a sweeping sheen, and a promo code that confirms itself when copied.
- [Banner Newsletter Inline](https://pixelpapa.com/components/banners/banner-newsletter-inline.md): An in-article signup banner: on submit the paper plane flies off, the field collapses and a confirmation line draws itself in.
- [Banner Status Incident](https://pixelpapa.com/components/banners/banner-status-incident.md) (Pro): A status strip with a pulsing severity dot that expands on a spring into a timeline of incident updates, recoloured by severity.
- [Banner Upgrade Progress](https://pixelpapa.com/components/banners/banner-upgrade-progress.md): An in-app usage banner whose meter springs to the current value, counts the number up and shifts from calm to amber to red as the plan limit nears.