52 |

56 |

57 | ); 58 | } -------------------------------------------------------------------------------- /components/hero.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Container } from "@/components/ui/container"; 4 | import { CopyIcon } from "lucide-react"; 5 | 6 | export function Hero() { 7 | return ( 8 |

9 | 10 |

11 |

12 |

13 | shadcn/ui cookie consent 14 |

15 | 16 |

17 | Sleek and flexible cookie consent component, designed with 18 | shadcn/ui 19 |

20 |

21 | 22 |

23 |

 {
26 |                 navigator.clipboard.writeText(
27 |                   "npx shadcn@latest add http://shadcn-cookies.vercel.app/r/cookie-consent.json"
28 |                 );
29 |               }}
30 |             >
31 |               npx shadcn@latest add
32 |               http://shadcn-cookies.vercel.app/r/cookie-consent.json
33 |

34 | 44 |

45 |

46 | 47 |

48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /components/navbar.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import Link from "next/link" 4 | import { ModeToggle } from "@/components/mode-toggle" 5 | import { Container } from "@/components/ui/container" 6 | import { Button } from "@/components/ui/button" 7 | import { StarCount } from "@/components/star-count" 8 | 9 | export function Navbar() { 10 | return ( 11 |

12 | 13 |

14 |

15 | 16 | 17 | shadcn/ui cookies 18 | 19 |

20 | 21 |

22 | 30 | 31 |

32 | 33 |

34 | 35 | 36 |

37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /components/ui/tabs.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as TabsPrimitive from "@radix-ui/react-tabs" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Tabs = TabsPrimitive.Root 9 | 10 | const TabsList = React.forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, ...props }, ref) => ( 14 | 22 | )) 23 | TabsList.displayName = TabsPrimitive.List.displayName 24 | 25 | const TabsTrigger = React.forwardRef< 26 | React.ElementRef, 27 | React.ComponentPropsWithoutRef 28 | >(({ className, ...props }, ref) => ( 29 | 37 | )) 38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName 39 | 40 | const TabsContent = React.forwardRef< 41 | React.ElementRef, 42 | React.ComponentPropsWithoutRef 43 | >(({ className, ...props }, ref) => ( 44 | 52 | )) 53 | TabsContent.displayName = TabsPrimitive.Content.displayName 54 | 55 | export { Tabs, TabsList, TabsTrigger, TabsContent } 56 | -------------------------------------------------------------------------------- /components/demo.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState, useEffect } from "react"; 4 | import { Container } from "@/components/ui/container"; 5 | import { CookieConsent } from "./blocks/cookie-consent"; 6 | 7 | interface DemoProps { 8 | initialDemo1?: boolean; 9 | initialDemo2?: boolean; 10 | initialDemo3?: boolean; 11 | onDemoClose?: () => void; 12 | } 13 | 14 | export function Demo({ 15 | initialDemo1 = true, 16 | initialDemo2 = true, 17 | initialDemo3 = true, 18 | onDemoClose 19 | }: DemoProps) { 20 | const [demo1, setDemo1] = useState(initialDemo1); 21 | const [demo2, setDemo2] = useState(initialDemo2); 22 | const [demo3, setDemo3] = useState(initialDemo3); 23 | 24 | const handleDemoClose = () => { 25 | if (!demo1 && !demo2 && !demo3 && onDemoClose) { 26 | onDemoClose(); 27 | } 28 | }; 29 | 30 | useEffect(() => { 31 | setDemo1(initialDemo1); 32 | setDemo2(initialDemo2); 33 | setDemo3(initialDemo3); 34 | }, [initialDemo1, initialDemo2, initialDemo3]); 35 | 36 | return ( 37 | 38 | {demo1 && ( 39 | { 43 | setDemo1(false); 44 | handleDemoClose(); 45 | }} 46 | onDeclineCallback={() => { 47 | setDemo1(false); 48 | handleDemoClose(); 49 | }} 50 | /> 51 | )} 52 | {demo2 && ( 53 | { 57 | setDemo2(false); 58 | handleDemoClose(); 59 | }} 60 | onDeclineCallback={() => { 61 | setDemo2(false); 62 | handleDemoClose(); 63 | }} 64 | /> 65 | )} 66 | {demo3 && ( 67 | { 71 | setDemo3(false); 72 | handleDemoClose(); 73 | }} 74 | onDeclineCallback={() => { 75 | setDemo3(false); 76 | handleDemoClose(); 77 | }} 78 | /> 79 | )} 80 | 81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", 16 | outline: 17 | "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", 20 | ghost: 21 | "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", 22 | link: "text-primary underline-offset-4 hover:underline", 23 | }, 24 | size: { 25 | default: "h-9 px-4 py-2 has-[>svg]:px-3", 26 | sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", 27 | lg: "h-10 rounded-md px-6 has-[>svg]:px-4", 28 | icon: "size-9", 29 | }, 30 | }, 31 | defaultVariants: { 32 | variant: "default", 33 | size: "default", 34 | }, 35 | } 36 | ) 37 | 38 | function Button({ 39 | className, 40 | variant, 41 | size, 42 | asChild = false, 43 | ...props 44 | }: React.ComponentProps<"button"> & 45 | VariantProps & { 46 | asChild?: boolean 47 | }) { 48 | const Comp = asChild ? Slot : "button" 49 | 50 | return ( 51 | 56 | ) 57 | } 58 | 59 | export { Button, buttonVariants } 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](https://github.com/user-attachments/assets/9bada66f-6729-441f-b23f-c907cb0661bb) 2 | 3 |

4 |

shadcn/ui cookies

5 |

Sleek and flexible cookie consent component, designed with shadcn/ui.

6 |

7 | 8 | ## Installation 9 | 10 | To install the package, run the following command: 11 | 12 | ```bash 13 | npx shadcn@latest add http://shadcn-cookies.vercel.app/r/cookie-consent.json 14 | ``` 15 | 16 | ## Usage 17 | 18 | The `CookieConsent` component provides a simple way to handle cookie consent in your application. It supports multiple variants (`default`, `small`, `minimal`) and allows you to execute custom functions when users accept or decline cookies. 19 | 20 | ### Default 21 | ```tsx 22 | import { CookieConsent } from "@/components/ui/cookie-consent" 23 | 24 | export default function Page() { 25 | return ( 26 | { 29 | // Handle accept 30 | }} 31 | onDeclineCallback={() => { 32 | // Handle decline 33 | }} 34 | /> 35 | ) 36 | } 37 | ``` 38 | 39 | ### Small 40 | ```tsx 41 | import { CookieConsent } from "@/components/ui/cookie-consent" 42 | 43 | export default function Page() { 44 | return ( 45 | { 48 | // Handle accept 49 | }} 50 | onDeclineCallback={() => { 51 | // Handle decline 52 | }} 53 | /> 54 | ) 55 | } 56 | ``` 57 | 58 | ### Minimal 59 | ```tsx 60 | import { CookieConsent } from "@/components/ui/cookie-consent" 61 | 62 | export default function Page() { 63 | return ( 64 | { 67 | // Handle accept 68 | }} 69 | onDeclineCallback={() => { 70 | // Handle decline 71 | }} 72 | /> 73 | ) 74 | } 75 | ``` 76 | 77 | ## Contributing 78 | 79 | We welcome contributions to improve `shadcn/ui cookies`! 80 | 81 | ### How to Contribute 82 | 1. **Fork the Repository** - Click the "Fork" button at the top right of this page. 83 | 2. **Clone Your Fork** - Run the following command in your terminal: 84 | ```bash 85 | git clone https://github.com/kaizenics/shadcn-cookies.git 86 | cd shadcn-cookies 87 | ``` 88 | 3. **Create a New Branch** - Name it something relevant. e.g., `feature-minimal-variant` or `variant-minimal-added`: 89 | ```bash 90 | git checkout -b feature-minimal-variant 91 | ``` 92 | 4. **Make Your Changes** - Implement your improvements or fixes. 93 | 5. **Commit & Push** 94 | ```bash 95 | git add . 96 | git commit -m "feat: added new cookie consent variant" 97 | git push origin feature-minimal-variant 98 | ``` 99 | 6. **Open a Pull Request** - Go to original repo, click "New Pull Request", and select your branch. 100 | 101 | ## Demo 102 | - [Live Demo](https://shadcn-cookies.vercel.app) 103 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | 3 | @plugin 'tailwindcss-animate'; 4 | 5 | @custom-variant dark (&:is(.dark *)); 6 | 7 | @theme { 8 | --font-sans: var(--font-geist-sans); 9 | --font-mono: var(--font-geist-mono); 10 | --font-lexend: var(--font-lexend); 11 | 12 | --color-background: hsl(var(--background)); 13 | --color-foreground: hsl(var(--foreground)); 14 | 15 | --color-card: hsl(var(--card)); 16 | --color-card-foreground: hsl(var(--card-foreground)); 17 | 18 | --color-popover: hsl(var(--popover)); 19 | --color-popover-foreground: hsl(var(--popover-foreground)); 20 | 21 | --color-primary: hsl(var(--primary)); 22 | --color-primary-foreground: hsl(var(--primary-foreground)); 23 | 24 | --color-secondary: hsl(var(--secondary)); 25 | --color-secondary-foreground: hsl(var(--secondary-foreground)); 26 | 27 | --color-muted: hsl(var(--muted)); 28 | --color-muted-foreground: hsl(var(--muted-foreground)); 29 | 30 | --color-accent: hsl(var(--accent)); 31 | --color-accent-foreground: hsl(var(--accent-foreground)); 32 | 33 | --color-destructive: hsl(var(--destructive)); 34 | --color-destructive-foreground: hsl(var(--destructive-foreground)); 35 | 36 | --color-border: hsl(var(--border)); 37 | --color-input: hsl(var(--input)); 38 | --color-ring: hsl(var(--ring)); 39 | 40 | --color-chart-1: hsl(var(--chart-1)); 41 | --color-chart-2: hsl(var(--chart-2)); 42 | --color-chart-3: hsl(var(--chart-3)); 43 | --color-chart-4: hsl(var(--chart-4)); 44 | --color-chart-5: hsl(var(--chart-5)); 45 | 46 | --radius-lg: var(--radius); 47 | --radius-md: calc(var(--radius) - 2px); 48 | --radius-sm: calc(var(--radius) - 4px); 49 | } 50 | 51 | /* 52 | The default border color has changed to `currentcolor` in Tailwind CSS v4, 53 | so we've added these compatibility styles to make sure everything still 54 | looks the same as it did with Tailwind CSS v3. 55 | 56 | If we ever want to remove these styles, we need to add an explicit border 57 | color utility to any element that depends on these defaults. 58 | */ 59 | @layer base { 60 | *, 61 | ::after, 62 | ::before, 63 | ::backdrop, 64 | ::file-selector-button { 65 | border-color: var(--color-gray-200, currentcolor); 66 | } 67 | } 68 | 69 | @utility shiki { 70 | @apply bg-muted!; 71 | @apply rounded-lg; 72 | 73 | & code { 74 | @apply grid; 75 | @apply min-w-full; 76 | } 77 | 78 | & .line { 79 | @apply px-4; 80 | @apply py-0.5; 81 | } 82 | 83 | & .line.focus { 84 | @apply bg-accent; 85 | @apply shadow-[inset_2px_0] shadow-blue-400; 86 | } 87 | } 88 | 89 | @utility line { 90 | .shiki & { 91 | @apply px-4; 92 | @apply py-0.5; 93 | } 94 | 95 | .shiki &.focus { 96 | @apply bg-accent; 97 | @apply shadow-[inset_2px_0] shadow-blue-400; 98 | } 99 | } 100 | 101 | @utility focus { 102 | .shiki &.line { 103 | @apply bg-accent; 104 | @apply shadow-[inset_2px_0] shadow-blue-400; 105 | } 106 | } 107 | 108 | @layer utilities { 109 | body { 110 | font-family: Arial, Helvetica, sans-serif; 111 | } 112 | } 113 | 114 | @layer base { 115 | :root { 116 | --background: 0 0% 100%; 117 | --foreground: 240 10% 3.9%; 118 | --card: 0 0% 100%; 119 | --card-foreground: 240 10% 3.9%; 120 | --popover: 0 0% 100%; 121 | --popover-foreground: 240 10% 3.9%; 122 | --primary: 240 5.9% 10%; 123 | --primary-foreground: 0 0% 98%; 124 | --secondary: 240 4.8% 95.9%; 125 | --secondary-foreground: 240 5.9% 10%; 126 | --muted: 240 4.8% 95.9%; 127 | --muted-foreground: 240 3.8% 46.1%; 128 | --accent: 240 4.8% 95.9%; 129 | --accent-foreground: 240 5.9% 10%; 130 | --destructive: 0 84.2% 60.2%; 131 | --destructive-foreground: 0 0% 98%; 132 | --border: 240 5.9% 90%; 133 | --input: 240 5.9% 90%; 134 | --ring: 240 10% 3.9%; 135 | --chart-1: 12 76% 61%; 136 | --chart-2: 173 58% 39%; 137 | --chart-3: 197 37% 24%; 138 | --chart-4: 43 74% 66%; 139 | --chart-5: 27 87% 67%; 140 | --radius: 0.5rem; 141 | } 142 | .dark { 143 | --background: 240 10% 3.9%; 144 | --foreground: 0 0% 98%; 145 | --card: 240 10% 3.9%; 146 | --card-foreground: 0 0% 98%; 147 | --popover: 240 10% 3.9%; 148 | --popover-foreground: 0 0% 98%; 149 | --primary: 0 0% 98%; 150 | --primary-foreground: 240 5.9% 10%; 151 | --secondary: 240 3.7% 15.9%; 152 | --secondary-foreground: 0 0% 98%; 153 | --muted: 240 3.7% 15.9%; 154 | --muted-foreground: 240 5% 64.9%; 155 | --accent: 240 3.7% 15.9%; 156 | --accent-foreground: 0 0% 98%; 157 | --destructive: 0 62.8% 30.6%; 158 | --destructive-foreground: 0 0% 98%; 159 | --border: 240 3.7% 15.9%; 160 | --input: 240 3.7% 15.9%; 161 | --ring: 240 4.9% 83.9%; 162 | --chart-1: 220 70% 50%; 163 | --chart-2: 160 60% 45%; 164 | --chart-3: 30 80% 55%; 165 | --chart-4: 280 65% 60%; 166 | --chart-5: 340 75% 55%; 167 | } 168 | } 169 | 170 | @layer base { 171 | * { 172 | @apply border-border; 173 | } 174 | body { 175 | @apply bg-background text-foreground; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /public/r/cookie-consent.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "cookie-consent", 4 | "type": "registry:block", 5 | "title": "Cookie Consent", 6 | "description": "A cookie consent component.", 7 | "files": [ 8 | { 9 | "path": "registry/cookie-consent.tsx", 10 | "content": "\"use client\";\r\n\r\nimport { CookieIcon } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nexport function CookieConsent({\r\n variant = \"default\",\r\n mode = false,\r\n onAcceptCallback = () => { },\r\n onDeclineCallback = () => { },\r\n}) {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [hide, setHide] = useState(false);\r\n\r\n const accept = () => {\r\n setIsOpen(false);\r\n document.cookie =\r\n \"cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT\";\r\n setTimeout(() => {\r\n setHide(true);\r\n }, 700);\r\n onAcceptCallback();\r\n };\r\n\r\n const decline = () => {\r\n setIsOpen(false);\r\n setTimeout(() => {\r\n setHide(true);\r\n }, 700);\r\n onDeclineCallback();\r\n };\r\n\r\n useEffect(() => {\r\n try {\r\n setIsOpen(true);\r\n if (document.cookie.includes(\"cookieConsent=true\")) {\r\n if (!mode) {\r\n setIsOpen(false);\r\n setTimeout(() => {\r\n setHide(true);\r\n }, 700);\r\n }\r\n }\r\n } catch (error) {\r\n console.error(\"Error checking cookie consent:\", error);\r\n }\r\n }, []);\r\n\r\n return variant === \"default\" ? (\r\n \r\n

\r\n

We use cookies

\r\n \r\n

\r\n

\r\n We use cookies to ensure you get the best experience on our\r\n website. For more information on how we use cookies, please see\r\n our cookie policy.\r\n
\r\n
\r\n \r\n By clicking{\" \"}\r\n Accept, you\r\n agree to our use of cookies.\r\n \r\n
\r\n \r\n Learn more.\r\n \r\n

\r\n

\r\n \r\n \r\n

\r\n

13 | shadcn/ui cookie consent 14 |

shadcn/ui cookies

We use cookies

We use cookies

We use cookies

We use cookies

We use cookies

We use cookies

{title}

We use cookies

We use cookies