A consent banner as a shadcn component

Most consent tools inject their own UI into your page: their fonts, their radii, their z-index fights. If your project already uses shadcn/ui, there is a cleaner way - install the banner as a registry component and own every line of it.

Install

npx shadcn@latest add https://consentify.dev/r/consent-banner.json

This drops a consent-banner component and a lib/consentify.ts setup file into your project, styled with your existing tokens - it uses your theme variables, your button component, your radius. It is code in your repo, not a script tag, so you can rename the categories, restructure the layout, or rip out anything you do not need.

What is underneath

The component wraps @consentify/core, a headless consent SDK: cookie persistence, policy versioning, category state, and script gating with no UI opinions. The generated setup is self-hosted - your categories live in your code, and consent stays in the visitor's browser. No account required.

import { createConsentify } from "@consentify/core";

export const consentify = await createConsentify({
  policy: {
    categories: ["analytics", "marketing"],
  },
});

Gating scripts on consent

The same blocking markup the widget uses works here, or gate imperatively:

consentify.client.subscribe((state) => {
  if (state.consent?.analytics) {
    loadAnalytics();
  }
});

When to add the cloud

The registry component alone gives you a compliant banner. What it does not give you is proof: consent records with policy versions, aggregated accept rates, CSV exports for a client audit. That is the hosted side - create a site in the dashboard, point the SDK at it with siteId and the cloud endpoints, and decisions start landing in your consent log. Free for one site.

Why this beats a widget for design-heavy projects

• No foreign CSS - the banner is built from your components
• No layout shift from injected DOM you do not control
• Server-rendered with your app, no separate script fetch
• Type-safe category names, since the config is your code

If you just want consent working in two minutes on any site, the script-tag setup is still the shortest path. This component is for when the banner has to feel native because everything else on the page does.