Components
Loading preview...
The CookiePanel is a compact, bottom‑right floating cookie consent banner built with Next.js, TypeScript, TailwindCSS v4, and Lucide icons. It presents users with a clear cookie policy message, quick Accept all and Customize actions, and theme‑aware styling. Clicking Customize smoothly expands an inline preferences panel inside the toast, letting users toggle cookie categories without leaving the page. Preferences are saved to localStorage and the banner closes automatically upon saving, ensuring a clean, interruption‑free user experience. Built‑in slide/fade animations are handled purely with Tailwind’s tw-animate-css utilities for a lightweight, modern feel.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/cookie-banner-1import { CookiePanel } from "@/components/ui/cookie-banner-1";
export default function DemoCookiePanel() {
return (
<main className="min-h-screen grid place-items-center bg-background text-foreground p-8">
<div className="m-auto max-w-xl text-center">
<h1 className="text-2xl font-semibold mb-2">Cookie Panel — Toast with Preferences</h1>
<p className="text-muted-foreground mb-8">
This demo shows the compact, bottom‑right floating cookie banner.
Click <strong>Customize</strong> to expand and adjust your cookie preferences inline — no modal needed.
</p>
</div>
<CookiePanel />
</main>
);
}