Introducing NexaDashNext.js admin dashboard with UI components

Free templates

Next.js templates

Best Next.js templates

React templates

Best React templates

HTML5 templates

Best HTML5 templates

Tailwind CSS templates

Best Tailwind CSS templates

Vue.js templates

Best Vue.js templates

Nuxt templates

Best Nuxt templates

AngularJs templates

Best AngularJs templates

All templates

Premium templates

Components

Best Components

Blocks

Best Blocks

Affiliates All Templates – Just $99🔥

Free templates

Affiliates

Introduction

Pages
- Login
- Signup
Blocks

Cookie banner at bottom

components/cookie-banner.tsx

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7import { Card, CardContent, CardFooter } from '@/components/ui/card'
8
9export function CookieBanner01() {
10    const [visible, setVisible] = React.useState(true)
11
12    return (
13        <>
14            <div className="mx-auto w-full space-y-10 px-6 sm:relative">
15                <h1 className="text-4xl font-bold">
16                    Privacy & Cookie Policy Demo
17                </h1>
18
19                {Array.from({ length: 10 }).map((_, index) => (
20                    <section key={index} className="space-y-2">
21                        <h2 className="text-xl font-semibold">
22                            Section {index + 1}
23                        </h2>
24                        <p className="text-muted-foreground">
25                            Lorem ipsum dolor sit amet, consectetur adipiscing
26                            elit. Sed do eiusmod tempor incididunt ut labore et
27                            dolore magna aliqua. Ut enim ad minim veniam, quis
28                            nostrud exercitation ullamco laboris nisi ut aliquip
29                            ex ea commodo consequat.
30                        </p>
31                    </section>
32                ))}
33            </div>
34
35            {visible && (
36                <div className="absolute bottom-0 left-0 z-50 w-full lg:fixed">
37                    <Card className="bg-gray rounded-none text-white shadow-lg">
38                        <CardContent>
39                            <p className="text-muted-foreground text-sm">
40                                We use our own cookies as well as third-party
41                                cookies on our websites to enhance your
42                                experience, analyze our traffic, and for
43                                security and marketing. Select{' '}
44                                <strong>Accept all cookies</strong> to allow
45                                them to be used. Read our Cookie Policy.
46                            </p>
47                        </CardContent>
48
49                        <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
50                            <Button variant="link" className="text-white">
51                                Manage preferences
52                            </Button>
53                            <Button
54                                className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
55                                onClick={() => {
56                                    toast('Clicked browse all cookies button')
57                                }}
58                            >
59                                Browse all cookies
60                            </Button>
61                            <Button
62                                className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
63                                onClick={() => {
64                                    setVisible(false)
65                                    toast.success('Accepted all cookies.')
66                                }}
67                            >
68                                Accept all cookies
69                            </Button>
70                        </CardFooter>
71                    </Card>
72                </div>
73            )}
74        </>
75    )
76}
77

Cookie banner at bottom

cookie-banner-01

Privacy & Cookie Policy Demo

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

We use our own cookies as well as third-party cookies on our websites to enhance your experience, analyze our traffic, and for security and marketing. Select Accept all cookies to allow them to be used. Read our Cookie Policy.

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7import { Card, CardContent, CardFooter } from '@/components/ui/card'
8
9export function CookieBanner01() {
10    const [visible, setVisible] = React.useState(true)
11
12    return (
13        <>
14            <div className="mx-auto w-full space-y-10 px-6 sm:relative">
15                <h1 className="text-4xl font-bold">
16                    Privacy & Cookie Policy Demo
17                </h1>
18
19                {Array.from({ length: 10 }).map((_, index) => (
20                    <section key={index} className="space-y-2">
21                        <h2 className="text-xl font-semibold">
22                            Section {index + 1}
23                        </h2>
24                        <p className="text-muted-foreground">
25                            Lorem ipsum dolor sit amet, consectetur adipiscing
26                            elit. Sed do eiusmod tempor incididunt ut labore et
27                            dolore magna aliqua. Ut enim ad minim veniam, quis
28                            nostrud exercitation ullamco laboris nisi ut aliquip
29                            ex ea commodo consequat.
30                        </p>
31                    </section>
32                ))}
33            </div>
34
35            {visible && (
36                <div className="absolute bottom-0 left-0 z-50 w-full lg:fixed">
37                    <Card className="bg-gray rounded-none text-white shadow-lg">
38                        <CardContent>
39                            <p className="text-muted-foreground text-sm">
40                                We use our own cookies as well as third-party
41                                cookies on our websites to enhance your
42                                experience, analyze our traffic, and for
43                                security and marketing. Select{' '}
44                                <strong>Accept all cookies</strong> to allow
45                                them to be used. Read our Cookie Policy.
46                            </p>
47                        </CardContent>
48
49                        <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
50                            <Button variant="link" className="text-white">
51                                Manage preferences
52                            </Button>
53                            <Button
54                                className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
55                                onClick={() => {
56                                    toast('Clicked browse all cookies button')
57                                }}
58                            >
59                                Browse all cookies
60                            </Button>
61                            <Button
62                                className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
63                                onClick={() => {
64                                    setVisible(false)
65                                    toast.success('Accepted all cookies.')
66                                }}
67                            >
68                                Accept all cookies
69                            </Button>
70                        </CardFooter>
71                    </Card>
72                </div>
73            )}
74        </>
75    )
76}
77

Cookie banner as card in right

components/cookie-banner.tsx

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7
8export function CookieBanner02() {
9    const [visible, setVisible] = React.useState(true)
10
11    return (
12        <>
13            <main className="mx-auto max-w-5xl space-y-12 px-6 py-10 sm:relative">
14                <h1 className="text-4xl font-bold">
15                    Privacy & Cookie Policy Demo
16                </h1>
17
18                {Array.from({ length: 10 }).map((_, index) => (
19                    <section key={index} className="space-y-2">
20                        <h2 className="text-xl font-semibold">
21                            Section {index + 1}
22                        </h2>
23                        <p className="text-muted-foreground">
24                            Lorem ipsum dolor sit amet, consectetur adipiscing
25                            elit. Sed do eiusmod tempor incididunt ut labore et
26                            dolore magna aliqua. Ut enim ad minim veniam, quis
27                            nostrud exercitation ullamco laboris nisi ut aliquip
28                            ex ea commodo consequat.
29                        </p>
30                    </section>
31                ))}
32            </main>
33
34            {visible && (
35                <div className="pointer-events-none absolute inset-0 z-50 lg:fixed">
36                    <div className="pointer-events-auto absolute right-5 bottom-5">
37                        <div className="bg-gray w-full max-w-md rounded-xl p-6 text-white shadow-xl">
38                            <p className="mb-4 text-sm leading-relaxed text-white">
39                                We use cookies, including third-party cookies,
40                                for operational purposes, statistical analyses,
41                                and to personalize your experience and content.
42                            </p>
43
44                            <p className="mb-6 text-sm leading-relaxed text-white">
45                                Learn more about the types of cookies we use and
46                                how to manage them in our{' '}
47                                <span className="cursor-pointer font-medium text-white underline underline-offset-4">
48                                    cookie policy
49                                </span>
50                                .
51                            </p>
52
53                            <div className="flex flex-wrap gap-3">
54                                <Button className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white">
55                                    Personalize my choices
56                                </Button>
57
58                                <Button
59                                    variant="link"
60                                    className="text-white"
61                                    onClick={() => {
62                                        setVisible(false)
63                                        toast('Cookies rejected')
64                                    }}
65                                >
66                                    Reject all
67                                </Button>
68
69                                <Button
70                                    className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
71                                    onClick={() => {
72                                        setVisible(false)
73                                        toast.success('Cookies accepted')
74                                    }}
75                                >
76                                    Accept all
77                                </Button>
78                            </div>
79                        </div>
80                    </div>
81                </div>
82            )}
83        </>
84    )
85}
86

Cookie banner as card in right

cookie-banner-02

Privacy & Cookie Policy Demo

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

We use cookies, including third-party cookies, for operational purposes, statistical analyses, and to personalize your experience and content.

Learn more about the types of cookies we use and how to manage them in our cookie policy.

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7
8export function CookieBanner02() {
9    const [visible, setVisible] = React.useState(true)
10
11    return (
12        <>
13            <main className="mx-auto max-w-5xl space-y-12 px-6 py-10 sm:relative">
14                <h1 className="text-4xl font-bold">
15                    Privacy & Cookie Policy Demo
16                </h1>
17
18                {Array.from({ length: 10 }).map((_, index) => (
19                    <section key={index} className="space-y-2">
20                        <h2 className="text-xl font-semibold">
21                            Section {index + 1}
22                        </h2>
23                        <p className="text-muted-foreground">
24                            Lorem ipsum dolor sit amet, consectetur adipiscing
25                            elit. Sed do eiusmod tempor incididunt ut labore et
26                            dolore magna aliqua. Ut enim ad minim veniam, quis
27                            nostrud exercitation ullamco laboris nisi ut aliquip
28                            ex ea commodo consequat.
29                        </p>
30                    </section>
31                ))}
32            </main>
33
34            {visible && (
35                <div className="pointer-events-none absolute inset-0 z-50 lg:fixed">
36                    <div className="pointer-events-auto absolute right-5 bottom-5">
37                        <div className="bg-gray w-full max-w-md rounded-xl p-6 text-white shadow-xl">
38                            <p className="mb-4 text-sm leading-relaxed text-white">
39                                We use cookies, including third-party cookies,
40                                for operational purposes, statistical analyses,
41                                and to personalize your experience and content.
42                            </p>
43
44                            <p className="mb-6 text-sm leading-relaxed text-white">
45                                Learn more about the types of cookies we use and
46                                how to manage them in our{' '}
47                                <span className="cursor-pointer font-medium text-white underline underline-offset-4">
48                                    cookie policy
49                                </span>
50                                .
51                            </p>
52
53                            <div className="flex flex-wrap gap-3">
54                                <Button className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white">
55                                    Personalize my choices
56                                </Button>
57
58                                <Button
59                                    variant="link"
60                                    className="text-white"
61                                    onClick={() => {
62                                        setVisible(false)
63                                        toast('Cookies rejected')
64                                    }}
65                                >
66                                    Reject all
67                                </Button>
68
69                                <Button
70                                    className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
71                                    onClick={() => {
72                                        setVisible(false)
73                                        toast.success('Cookies accepted')
74                                    }}
75                                >
76                                    Accept all
77                                </Button>
78                            </div>
79                        </div>
80                    </div>
81                </div>
82            )}
83        </>
84    )
85}
86

Cookie banner in center with blur content

components/cookie-banner.tsx

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7import { Card, CardContent, CardFooter } from '@/components/ui/card'
8
9export function CookieBanner03() {
10    const [consentGiven, setConsentGiven] = React.useState(false)
11
12    return (
13        <>
14            <div
15                className={`mx-auto w-full space-y-10 px-6 py-10 transition-all duration-300 sm:relative ${
16                    !consentGiven
17                        ? 'pointer-events-none blur-xs select-none'
18                        : ''
19                }`}
20            >
21                <h1 className="text-4xl font-bold">
22                    Privacy & Cookie Policy Demo
23                </h1>
24
25                {Array.from({ length: 10 }).map((_, index) => (
26                    <section key={index} className="space-y-2">
27                        <h2 className="text-xl font-semibold">
28                            Section {index + 1}
29                        </h2>
30                        <p className="text-muted-foreground">
31                            Lorem ipsum dolor sit amet, consectetur adipiscing
32                            elit. Sed do eiusmod tempor incididunt ut labore et
33                            dolore magna aliqua. Ut enim ad minim veniam, quis
34                            nostrud exercitation ullamco laboris nisi ut aliquip
35                            ex ea commodo consequat.
36                        </p>
37                    </section>
38                ))}
39            </div>
40
41            {!consentGiven && (
42                <div className="absolute inset-0 z-50 flex items-center justify-center lg:fixed">
43                    <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
44
45                    <Card className="bg-gray relative z-10 w-full max-w-2xl rounded-xl text-white shadow-2xl">
46                        <CardContent className="space-y-4 p-6">
47                            <h2 className="text-xl font-semibold">
48                                We use cookies
49                            </h2>
50
51                            <p className="text-muted-foreground text-sm">
52                                We use our own cookies and third-party cookies
53                                to enhance your experience, analyze traffic, and
54                                provide personalized content.
55                            </p>
56
57                            <p className="text-muted-foreground text-sm">
58                                By clicking <strong>Accept all cookies</strong>,
59                                you agree to the storing of cookies on your
60                                device. Learn more in our{' '}
61                                <span className="cursor-pointer underline underline-offset-4">
62                                    Cookie Policy
63                                </span>
64                                .
65                            </p>
66                        </CardContent>
67
68                        <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
69                            <Button
70                                variant="link"
71                                className="text-white"
72                                onClick={() => {
73                                    setConsentGiven(true)
74                                    toast('Cookies rejected')
75                                }}
76                            >
77                                Reject all
78                            </Button>
79
80                            <Button
81                                className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
82                                onClick={() => {
83                                    setConsentGiven(true)
84                                    toast.success('Cookies accepted')
85                                }}
86                            >
87                                Accept all cookies
88                            </Button>
89                        </CardFooter>
90                    </Card>
91                </div>
92            )}
93        </>
94    )
95}
96

Cookie banner in center with blur content

cookie-banner-03

Privacy & Cookie Policy Demo

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

We use cookies

We use our own cookies and third-party cookies to enhance your experience, analyze traffic, and provide personalized content.

By clicking Accept all cookies, you agree to the storing of cookies on your device. Learn more in our Cookie Policy.

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7import { Card, CardContent, CardFooter } from '@/components/ui/card'
8
9export function CookieBanner03() {
10    const [consentGiven, setConsentGiven] = React.useState(false)
11
12    return (
13        <>
14            <div
15                className={`mx-auto w-full space-y-10 px-6 py-10 transition-all duration-300 sm:relative ${
16                    !consentGiven
17                        ? 'pointer-events-none blur-xs select-none'
18                        : ''
19                }`}
20            >
21                <h1 className="text-4xl font-bold">
22                    Privacy & Cookie Policy Demo
23                </h1>
24
25                {Array.from({ length: 10 }).map((_, index) => (
26                    <section key={index} className="space-y-2">
27                        <h2 className="text-xl font-semibold">
28                            Section {index + 1}
29                        </h2>
30                        <p className="text-muted-foreground">
31                            Lorem ipsum dolor sit amet, consectetur adipiscing
32                            elit. Sed do eiusmod tempor incididunt ut labore et
33                            dolore magna aliqua. Ut enim ad minim veniam, quis
34                            nostrud exercitation ullamco laboris nisi ut aliquip
35                            ex ea commodo consequat.
36                        </p>
37                    </section>
38                ))}
39            </div>
40
41            {!consentGiven && (
42                <div className="absolute inset-0 z-50 flex items-center justify-center lg:fixed">
43                    <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
44
45                    <Card className="bg-gray relative z-10 w-full max-w-2xl rounded-xl text-white shadow-2xl">
46                        <CardContent className="space-y-4 p-6">
47                            <h2 className="text-xl font-semibold">
48                                We use cookies
49                            </h2>
50
51                            <p className="text-muted-foreground text-sm">
52                                We use our own cookies and third-party cookies
53                                to enhance your experience, analyze traffic, and
54                                provide personalized content.
55                            </p>
56
57                            <p className="text-muted-foreground text-sm">
58                                By clicking <strong>Accept all cookies</strong>,
59                                you agree to the storing of cookies on your
60                                device. Learn more in our{' '}
61                                <span className="cursor-pointer underline underline-offset-4">
62                                    Cookie Policy
63                                </span>
64                                .
65                            </p>
66                        </CardContent>
67
68                        <CardFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end">
69                            <Button
70                                variant="link"
71                                className="text-white"
72                                onClick={() => {
73                                    setConsentGiven(true)
74                                    toast('Cookies rejected')
75                                }}
76                            >
77                                Reject all
78                            </Button>
79
80                            <Button
81                                className="text-primary/80 hover:bg-primary border-gray-400 bg-gray-200 hover:text-white"
82                                onClick={() => {
83                                    setConsentGiven(true)
84                                    toast.success('Cookies accepted')
85                                }}
86                            >
87                                Accept all cookies
88                            </Button>
89                        </CardFooter>
90                    </Card>
91                </div>
92            )}
93        </>
94    )
95}
96

Cookie banner in left as a card with blur content

components/cookie-banner.tsx

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { cn } from '@/lib/utils'
7import { Button } from '@/components/ui/button'
8import {
9    Card,
10    CardContent,
11    CardFooter,
12    CardHeader,
13} from '@/components/ui/card'
14
15export function CookieBanner04() {
16    const [visible, setVisible] = React.useState(true)
17
18    return (
19        <>
20            <main
21                className={cn(
22                    `mx-auto max-w-5xl space-y-12 px-6 py-10 transition-all duration-300 sm:relative`,
23                    !visible && 'pointer-events-none blur-xs select-none',
24                )}
25            >
26                <h1 className="text-4xl font-bold">
27                    Privacy & Cookie Policy Demo
28                </h1>
29
30                {Array.from({ length: 10 }).map((_, index) => (
31                    <section key={index} className="space-y-2">
32                        <h2 className="text-xl font-semibold">
33                            Section {index + 1}
34                        </h2>
35                        <p className="text-muted-foreground">
36                            Lorem ipsum dolor sit amet, consectetur adipiscing
37                            elit. Sed do eiusmod tempor incididunt ut labore et
38                            dolore magna aliqua. Ut enim ad minim veniam, quis
39                            nostrud exercitation ullamco laboris nisi ut aliquip
40                            ex ea commodo consequat.
41                        </p>
42                    </section>
43                ))}
44            </main>
45
46            {visible && (
47                <div className="pointer-events-none absolute inset-0 z-50 lg:fixed">
48                    <div className="absolute inset-0 bg-black/40 backdrop-blur-sm">
49                        <Card className="bg-gray pointer-events-auto absolute bottom-5 left-5 text-white">
50                            <CardHeader className="text-lg font-semibold">
51                                Handle Cookie preferences
52                            </CardHeader>
53                            <CardContent className="w-full max-w-md rounded-xl p-6 shadow-xl">
54                                <p className="mb-4 text-sm leading-relaxed text-white">
55                                    We use cookies, including third-party
56                                    cookies, for operational purposes,
57                                    statistical analyses, and to personalize
58                                    your experience and content.
59                                </p>
60
61                                <p className="mb-6 text-sm leading-relaxed text-white">
62                                    Learn more about the types of cookies we use
63                                    and how to manage them in our{' '}
64                                    <span className="cursor-pointer font-medium text-white underline underline-offset-4">
65                                        cookie policy
66                                    </span>
67                                    .
68                                </p>
69                            </CardContent>
70                            <CardFooter className="flex flex-col flex-wrap gap-3">
71                                <Button
72                                    variant="link"
73                                    className="text-white"
74                                    onClick={() => {
75                                        setVisible(false)
76                                        toast('Cookies rejected')
77                                    }}
78                                >
79                                    Reject all
80                                </Button>
81
82                                <Button
83                                    className="text-primary/80 hover:bg-primary w-full border-gray-400 bg-gray-200 hover:text-white"
84                                    onClick={() => {
85                                        setVisible(false)
86                                        toast.success('Cookies accepted')
87                                    }}
88                                >
89                                    Accept all
90                                </Button>
91                            </CardFooter>
92                        </Card>
93                    </div>
94                </div>
95            )}
96        </>
97    )
98}
99

Cookie banner in left as a card with blur content

cookie-banner-04

Privacy & Cookie Policy Demo

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Handle Cookie preferences

We use cookies, including third-party cookies, for operational purposes, statistical analyses, and to personalize your experience and content.

Learn more about the types of cookies we use and how to manage them in our cookie policy.

1'use client'
2
3import * as React from 'react'
4import { toast } from 'sonner'
5
6import { cn } from '@/lib/utils'
7import { Button } from '@/components/ui/button'
8import {
9    Card,
10    CardContent,
11    CardFooter,
12    CardHeader,
13} from '@/components/ui/card'
14
15export function CookieBanner04() {
16    const [visible, setVisible] = React.useState(true)
17
18    return (
19        <>
20            <main
21                className={cn(
22                    `mx-auto max-w-5xl space-y-12 px-6 py-10 transition-all duration-300 sm:relative`,
23                    !visible && 'pointer-events-none blur-xs select-none',
24                )}
25            >
26                <h1 className="text-4xl font-bold">
27                    Privacy & Cookie Policy Demo
28                </h1>
29
30                {Array.from({ length: 10 }).map((_, index) => (
31                    <section key={index} className="space-y-2">
32                        <h2 className="text-xl font-semibold">
33                            Section {index + 1}
34                        </h2>
35                        <p className="text-muted-foreground">
36                            Lorem ipsum dolor sit amet, consectetur adipiscing
37                            elit. Sed do eiusmod tempor incididunt ut labore et
38                            dolore magna aliqua. Ut enim ad minim veniam, quis
39                            nostrud exercitation ullamco laboris nisi ut aliquip
40                            ex ea commodo consequat.
41                        </p>
42                    </section>
43                ))}
44            </main>
45
46            {visible && (
47                <div className="pointer-events-none absolute inset-0 z-50 lg:fixed">
48                    <div className="absolute inset-0 bg-black/40 backdrop-blur-sm">
49                        <Card className="bg-gray pointer-events-auto absolute bottom-5 left-5 text-white">
50                            <CardHeader className="text-lg font-semibold">
51                                Handle Cookie preferences
52                            </CardHeader>
53                            <CardContent className="w-full max-w-md rounded-xl p-6 shadow-xl">
54                                <p className="mb-4 text-sm leading-relaxed text-white">
55                                    We use cookies, including third-party
56                                    cookies, for operational purposes,
57                                    statistical analyses, and to personalize
58                                    your experience and content.
59                                </p>
60
61                                <p className="mb-6 text-sm leading-relaxed text-white">
62                                    Learn more about the types of cookies we use
63                                    and how to manage them in our{' '}
64                                    <span className="cursor-pointer font-medium text-white underline underline-offset-4">
65                                        cookie policy
66                                    </span>
67                                    .
68                                </p>
69                            </CardContent>
70                            <CardFooter className="flex flex-col flex-wrap gap-3">
71                                <Button
72                                    variant="link"
73                                    className="text-white"
74                                    onClick={() => {
75                                        setVisible(false)
76                                        toast('Cookies rejected')
77                                    }}
78                                >
79                                    Reject all
80                                </Button>
81
82                                <Button
83                                    className="text-primary/80 hover:bg-primary w-full border-gray-400 bg-gray-200 hover:text-white"
84                                    onClick={() => {
85                                        setVisible(false)
86                                        toast.success('Cookies accepted')
87                                    }}
88                                >
89                                    Accept all
90                                </Button>
91                            </CardFooter>
92                        </Card>
93                    </div>
94                </div>
95            )}
96        </>
97    )
98}
99