Shadcn Registry

The Consentify Shadcn Registry lets you install a fully customizable consent banner component directly into your project. The component is generated from your dashboard configuration - you own the source code and can modify it freely.

Prerequisites

A Consentify account with a configured site
An API key (generate one in the dashboard under Settings > API Keys)
A project using shadcn/ui

Installation

npx shadcn add "https://consentify.dev/api/v1/registry/consent-banner?siteId=YOUR_SITE_ID&token=YOUR_API_KEY"

This installs:

File	Description
`components/ui/consent-banner.tsx`	React banner component styled to your dashboard config
`lib/consentify.ts`	Pre-configured SDK instance with cloud adapter

And adds these dependencies:

@consentify/core - consent state management
@consentify/react - React hook
@consentify/cloud - cloud analytics adapter

Environment Variables

Add these to your .env.local:

NEXT_PUBLIC_CONSENTIFY_SITE_ID=your-site-id
NEXT_PUBLIC_CONSENTIFY_API_KEY=ck_your_api_key

Usage

Add the component to your root layout:

// app/layout.tsx
import { ConsentBanner } from '@/components/ui/consent-banner';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <ConsentBanner />
      </body>
    </html>
  );
}

The banner automatically:

Shows when the visitor hasn't consented yet
Hides after consent is given
Re-shows when your policy changes (categories added/removed)
Syncs across tabs

What Gets Generated

The banner component reflects your dashboard configuration:

Position - where the banner appears (bottom-right, bottom-left, etc.)
Theme - light, dark, or auto (follows system preference)
Accent color - button colors match your configured accent
Border radius - rounded corners match your setting
Text - title, description, and button labels from your config
Categories - your consent categories with names, descriptions, and required/default flags

Customization

Since you own the source code, you can modify anything:

// components/ui/consent-banner.tsx

// Change button text
<button onClick={handleAcceptAll}>Yes, Accept All</button>

// Add animations
<div className="animate-in slide-in-from-bottom">

// Change layout
<div className="flex flex-col md:flex-row">

The component uses @consentify/react's useConsentify hook for state and @consentify/core's client API for actions, so the consent logic remains solid even after UI changes.

Re-generating

If you change your site configuration in the dashboard and want to re-generate the component, run the same command again. It will overwrite the existing files with your updated configuration.

Manage Preferences Link

Add a link that lets users re-open the consent banner:

import { consentify } from '@/lib/consentify';

function ManagePreferences() {
  return (
    <button onClick={() => consentify.clear()}>
      Manage Cookie Preferences
    </button>
  );
}

Clearing consent via clear() sets the state back to { decision: 'unset' }, which causes the ConsentBanner component to re-render and show again.

On this page