https://github.com/r2hu1/shadcn-cookie-consent
Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css!
https://github.com/r2hu1/shadcn-cookie-consent
cookie-consent nextjs shadcn-ui shadcnui tailwindcss
Last synced: 13 days ago
JSON representation
Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css!
- Host: GitHub
- URL: https://github.com/r2hu1/shadcn-cookie-consent
- Owner: r2hu1
- Created: 2024-02-11T17:58:02.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-01T16:39:23.000Z (4 months ago)
- Last Synced: 2025-03-29T09:12:36.269Z (20 days ago)
- Topics: cookie-consent, nextjs, shadcn-ui, shadcnui, tailwindcss
- Language: JavaScript
- Homepage: https://shadcn-cookie-consent.vercel.app
- Size: 379 KB
- Stars: 162
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-shadcn-ui - shadcn-cookie-consent - Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css! (Libs and Components)
- awesome-shadcn-ui - shadcn-cookie-consent - Beautifully designed, customizable cookie consent for web built on top of shadcn-ui and tailwind-css! (Libs and Components)
- awesome-shadcn-ui - Link - 10-17 | (Libs and Components)
README
# Shadcn Cookie Consent
This repository contains a implementation of a cookie consent banner using Shadcn UI and TailwindCSS. This solution aims to provide a user-friendly way to comply with cookie consent regulations while maintaining a visually appealing design.
## Variant 1 - Small
## Variant 2 - Default
## How To Use
- Create a component named CookieConsent.jsx
- Make it a client component
```json
"use client"
```
- Import the following components from shadcn, react and react-icons
```jsx
import { CookieIcon } from "lucide-react";
import { Button } from "./ui/button";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
```
- Add this code the component
```jsx
export default function CookieConsent({
variant = "default",
demo = false,
onAcceptCallback = () => {},
onDeclineCallback = () => {},
}) {
const [isOpen, setIsOpen] = useState(false);
const [hide, setHide] = useState(false);
const accept = () => {
setIsOpen(false);
document.cookie =
"cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
setTimeout(() => {
setHide(true);
}, 700);
onAcceptCallback();
};
const decline = () => {
setIsOpen(false);
setTimeout(() => {
setHide(true);
}, 700);
onDeclineCallback();
};
useEffect(() => {
try {
setIsOpen(true);
if (document.cookie.includes("cookieConsent=true")) {
if (!demo) {
setIsOpen(false);
setTimeout(() => {
setHide(true);
}, 700);
}
}
} catch (e) {
// console.log("Error: ", e);
}
}, []);
return variant != "small" ? (
We use cookies
We use cookies to ensure you get the best experience
on our website. For more information on how we use
cookies, please see our cookie policy.
By clicking "
Accept
", you agree to our use of cookies.
Learn more.
Accept
Decline
) : (
We use cookies
We use cookies to ensure you get the best experience on
our website. For more information on how we use cookies,
please see our cookie policy.
accept
decline
);
}
```
## Variants
there are two variants one is default that is big and second is small
```jsx
```
## Callbacks
by default, these callbacks will be called when the user accepts or declines the cookie consent.
- onAcceptCallback
- onDeclineCallback
```jsx
onAcceptCallback={() => {
// code here
}}
onDeclineCallback={() => {
// code here
}}
```
## Customizing
- Add your own CSS
- Add your own TailwindCSS config
- Add your own shadcn theme
do whatever you want.
## Contributing
- Fork the repo
- Add your feature
- Fix any issues
- Create a Pull Request
## Demo
- [Live demo](https://shadcn-cookie-consent.vercel.app)