Crumbie

Cookie consent components you'll actually want on your website.

Beautiful, accessible, and fully editable cookie consent for modern React applications. Crumbie lets you own the code with no iframes, third-party widgets, or backend.

Features

• Cookie banner with Accept / Decline / Settings
• Cookie settings modal (Necessary, Preferences, Analytics, Marketing)
• Floating settings button
• ConsentGate for conditional rendering
• useCookieConsent and useConsentCategory hooks
• localStorage persistence with versioning and expiration
• Light & dark mode via CSS variables
• Accessible (keyboard, focus trap, reduced motion)
• TypeScript-first, SSR-safe, zero backend

Quick start

pnpm install
pnpm dev

import {
  CrumbieProvider,
  CookieBanner,
  CookieSettings,
  CookieSettingsButton,
} from "crumbie";

export default function RootLayout({ children }) {
  return (
    <CrumbieProvider>
      {children}
      <CookieBanner />
      <CookieSettings />
      <CookieSettingsButton />
    </CrumbieProvider>
  );
}

API

const {
  consent,
  hasConsent,
  acceptAll,
  declineAll,
  updatePreferences,
  resetConsent,
  openSettings,
  closeSettings,
  isAllowed,
} = useCookieConsent();

const analyticsEnabled = useConsentCategory("analytics");

<ConsentGate category="analytics">
  <Analytics />
</ConsentGate>;

Scripts

| Command | Description | | -------------- | ------------------------ | | pnpm dev | Start Next.js dev server | | pnpm build | Production build | | pnpm test | Run Vitest suite | | pnpm lint | ESLint | | pnpm format | Prettier |

Project structure

app/                 # Marketing site + docs
components/
  crumbie/           # Library components (banner, settings, provider…)
  ui/                # Shared primitives (button, dialog, switch)
  site/              # Landing & docs chrome
hooks/               # useCookieConsent, useConsentCategory
lib/                 # storage + utils
types/               # Consent types
registry/            # Reserved for future CLI

Future CLI

npx crumbie add banner
npx crumbie add settings
npx crumbie add provider

License

MIT