New

Cookie Consent

Bottom-fixed cookie consent banner with category toggles

Feedback & Statuscookieconsentprivacygdprbanner

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add switchnpx shadcn@latest add cardnpx shadcn@latest add separator

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Cookie } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import { Switch } from '@/components/ui/switch';
6import { Card, CardContent } from '@/components/ui/card';
7import { Separator } from '@/components/ui/separator';
8import { useState } from 'react';
9
10export default function CookieConsent() {
11  const [analytics, setAnalytics] = useState(true);
12  const [marketing, setMarketing] = useState(false);
13
14  return (
15    <div className="flex min-h-[500px] items-end justify-center bg-muted/30 p-6">
16      <Card className="w-full max-w-2xl">
17        <CardContent className="p-6">
18          <div className="flex flex-col gap-6 md:flex-row md:items-start">
19            <div className="flex shrink-0 items-center justify-center rounded-full bg-orange-100 p-3 dark:bg-orange-900/30">
20              <Cookie className="h-6 w-6 text-orange-600 dark:text-orange-400" />
21            </div>
22            <div className="flex-1 space-y-4">
23              <div>
24                <h3 className="font-semibold text-foreground">We value your privacy</h3>
25                <p className="mt-1 text-sm text-muted-foreground">
26                  We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic.
27                </p>
28              </div>
29              
30              <div className="space-y-3">
31                <div className="flex items-center justify-between">
32                  <div>
33                    <p className="text-sm font-medium text-foreground">Essential</p>
34                    <p className="text-xs text-muted-foreground">Required for the site to function</p>
35                  </div>
36                  <Switch checked disabled />
37                </div>
38                
39                <Separator />
40                
41                <div className="flex items-center justify-between">
42                  <div>
43                    <p className="text-sm font-medium text-foreground">Analytics</p>
44                    <p className="text-xs text-muted-foreground">Help us improve our website</p>
45                  </div>
46                  <Switch checked={analytics} onCheckedChange={setAnalytics} />
47                </div>
48                
49                <Separator />
50                
51                <div className="flex items-center justify-between">
52                  <div>
53                    <p className="text-sm font-medium text-foreground">Marketing</p>
54                    <p className="text-xs text-muted-foreground">Personalized ads and content</p>
55                  </div>
56                  <Switch checked={marketing} onCheckedChange={setMarketing} />
57                </div>
58              </div>
59
60              <div className="flex flex-wrap items-center justify-between gap-3">
61                <div className="flex gap-2">
62                  <Button size="sm">Accept All</Button>
63                  <Button size="sm" variant="outline">Save Preferences</Button>
64                </div>
65                <Button variant="link" size="sm" className="h-auto p-0 text-muted-foreground">
66                  Privacy Policy
67                </Button>
68              </div>
69            </div>
70          </div>
71        </CardContent>
72      </Card>
73    </div>
74  );
75}