Components

The building blocks of Crumbie. Each component is editable and designed to match a minimal, premium aesthetic.

CookieBanner

Bottom-aligned consent banner with Accept All, Decline, and Cookie Settings actions. Only appears when consent has not been given.

tsx

import { CookieBanner } from "crumbie"

<CookieBanner
  title="We value your privacy"
  description="We use cookies to improve your experience."
   position="center"
/>

CookieSettings

Accessible modal for managing categories: Necessary (always on), Preferences, Analytics, and Marketing.

tsx

import { CookieSettings } from "crumbie"

<CookieSettings
  title="Cookie Settings"
  description="Manage your cookie preferences."
/>

CookieSettingsButton

Optional floating (or inline) control to reopen settings after the banner has been dismissed.

tsx

import { CookieSettingsButton } from "crumbie"

<CookieSettingsButton variant="floating" />
<CookieSettingsButton variant="inline" label="Manage cookies" />

ConsentGate

Conditionally render children only when a consent category is enabled. Ideal for analytics scripts and marketing tags.

tsx

import { ConsentGate } from "crumbie"

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

<ConsentGate category="marketing" fallback={null}>
  <MarketingPixels />
</ConsentGate>

CrumbieProvider

Root provider that owns consent state, localStorage persistence, and settings open/close. Pass optional config for storage key, version, and expiration.

tsx

<CrumbieProvider
  config={{
    version: 1,
     storageKey: "crumbie-consent",
    expirationDays: 365,
  }}
>
  {children}
 </CrumbieProvider>