Skip to content
codus/consent

Registry Components

What are registry components?

Section titled “What are registry components?”

The library includes shadcn/ui-style components that you copy into your project — you own the code, you control the markup, you style it however you want.

They use @uabcodus/consent/react under the hood and come styled with the same Tailwind CSS tokens as the rest of your shadcn/ui setup.

Available components

Section titled “Available components”
Component File What it does
consent-banner.tsx Banner Fixed-position card at the bottom of the page with Accept All, Necessary Only, and Close buttons
consent-panel.tsx Panel Dialog/modal with per-category toggle switches, service sub-toggles, and cookie details
consent-table.tsx Table Read-only table for displaying cookie definitions
consent-toggle.tsx Toggle Accessible labelled switch for consent toggles

You can find the source in the docs registry directory.

Using the components

Section titled “Using the components”

Install via CLI

Section titled “Install via CLI”

If your project is set up with the shadcn CLI, you can install components directly:

Terminal window
npx shadcn@latest add https://uabcodus.github.io/consent/r/consent-banner.json

Manual copy

Section titled “Manual copy”

Alternatively, copy the .tsx files from the registry directory into your project’s components directory.

The components depend on these shadcn/ui primitives (make sure they’re installed):

  • button
  • card
  • dialog
  • label
  • switch
  • separator
  • table
Section titled “Banner”
import { ConsentBanner } from "@/components/consent-banner";
import { ConsentPanel } from "@/components/consent-panel";


function App() {
  const [preferencesOpen, setPreferencesOpen] = useState(false);


  return (
    <ConsentProvider
      options={{
        categories: {
          /* ... */
        }
      }}
    >
      <ConsentBanner onOpenPreferences={() => setPreferencesOpen(true)} />
      <ConsentPanel open={preferencesOpen} onOpenChange={setPreferencesOpen} />
    </ConsentProvider>
  );
}

The banner appears as a fixed-position card at the bottom of the screen. It’s automatically hidden when consent is already valid or skipped (bot detected).

It has Accept All and Reject All buttons of equal prominence for GDPR compliance, plus an optional Preferences button that opens the panel.

After consent is given, a floating Cookie Settings button appears at the bottom-left corner so users can re-open the panel and withdraw or change their consent at any time.

Panel

Section titled “Panel”
import { ConsentPanel } from "@/components/consent-panel";


function App() {
  return (
    <ConsentProvider
      options={{
        categories: {
          /* ... */
        }
      }}
    >
      <ConsentPanel />
    </ConsentProvider>
  );
}

The panel is a dialog modal with:

  • Per-category toggle switches (readOnly categories show as disabled)
  • Per-service sub-toggles within each category (if services are defined)
  • Cookie detail tables rendered automatically for services that define cookies
  • Reject All, Save Preferences, and Accept All footer buttons
  • Service toggles apply immediately. Category toggles are batched — they’re only committed when the user clicks Save.

Table

Section titled “Table”
import { ConsentTable } from "@/components/consent-table";


const cookies = [
  {
    name: "_ga",
    path: "/",
    domain: ".example.com",
    description: "Google Analytics"
  },
  {
    name: "_gid",
    path: "/",
    domain: ".example.com",
    description: "GA session"
  }
];


<ConsentTable cookies={cookies} />;

A simple read-only table for displaying cookie definitions. Use it in your cookie policy page or preferences panel.

Toggle

Section titled “Toggle”
import { ConsentToggle } from "@/components/consent-toggle";


<ConsentToggle
  id="analytics-toggle"
  label="Analytics"
  description="Help us understand how you use the site."
  checked={isAccepted}
  readOnly={isReadOnly}
  onCheckedChange={(checked) => {
    checked ? consent.accept("analytics") : consent.reject("analytics");
  }}
/>;

A labelled switch component following shadcn/ui conventions. Fully accessible — works with keyboard, screen readers, and touch.

Styling

Section titled “Styling”

The components use the same CSS variables as the rest of your shadcn/ui app. Customize them through your global.css theme:

:root {
  --primary: 220 80% 50%;
  /* etc. */
}

Everything inherits — buttons, toggles, cards, and dialogs will match your app’s look and feel automatically.

Customizing behavior

Section titled “Customizing behavior”

Since you own the code, you can modify anything. Want to change the banner position? Edit the fixed class. Want to add a “Learn More” link? Add it to the banner JSX. The components are thin wrappers around useConsent() — they’re designed to be hacked on.

Next steps

Section titled “Next steps”