Modern and complete solution for cookie consent management with direct Google Tag Manager integration
npx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonpnpm dlx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonbunx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonIn today's digital landscape, compliance with privacy regulations is essential. OpenCMP Cookies Manager allows you to maintain legal compliance without compromising user experience.
The platform facilitates technical implementation while ensuring your website complies with the strictest international data protection regulations.
Integrate OpenCMP Cookies Manager into your project in minutes. Compatible with React, Next.js, Astro, and any modern framework.
Use shadcn CLI to install the component directly into your project:
npx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonpnpm dlx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonbunx shadcn@latest add https://jondotsoy.github.io/opencmp/cookies-manager.jsonImport and use the component in your application according to the framework you're using:
---
import { CookieDialogSettings, CookiesManager } from "@/components/ui/cookies-manager";
---
<CookiesManager client:only="react" />
import { CookieDialogSettings, CookiesManager } from "@/components/ui/cookies-manager";
// Layout is a Server Component by default
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<main>
<CookiesManager />
{children}
</main>
</>
)
}
Your cookie manager will be working immediately. The component includes default configuration for GDPR compliance and automatically integrates with Google Tag Manager.
Add a button so users can open the cookie configuration panel at any time and from anywhere on your site:
---
import { CookieDialogSettings, CookiesManager } from "@/components/ui/cookies-manager";
---
<CookieDialogSettings client:load>
<button>
Customize your cookie preferences
</button>
</CookieDialogSettings>
💡 Tip: This tag allows opening the preferences panel from anywhere on the site. Use it in your footer, navbar, or wherever you consider most appropriate for user experience.