Components
Loading preview...
CookieBanner is a lightweight, responsive cookie consent component for Next.js built with TypeScript and TailwindCSS v4. It displays a customizable message with Accept and Decline actions, remembers the user’s choice in localStorage, and supports light/dark themes. Smooth slide-and-fade animations are powered entirely by Tailwind’s tw-animate-css utilities, ensuring no extra animation libraries are needed. This banner is fully accessible, adapts its layout across screen sizes, and can appear at the top or bottom of the viewport based on your preference — making it easy to integrate into any modern web app.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/cookie-bannerimport { CookieBanner } from "@/components/ui/cookie-banner";
export default function DemoPage() {
return (
<main className="flex min-h-screen items-center justify-center bg-background text-foreground p-8">
<div className="text-center max-w-md">
<h1 className="text-3xl font-bold mb-4">Cookie Banner Demo</h1>
<p className="mb-6 text-muted-foreground">
This is a demo page showing how the cookie banner works.
</p>
<CookieBanner />
</div>
</main>
);
}