Installation

Facade works in any React project that uses Tailwind CSS v4 and shadcn. Next.js is the reference setup.

1. Set up shadcn

Skip this if your project already has a components.json.

npx create-next-app@latest my-site
cd my-site
npx shadcn@latest init

2. Add the Facade tokens

Components use semantic tokens. shadcn already defines most of them. Add the Facade brand and status colors to your globals.css:

:root {
  --brand: #F2B705;
  --brand-foreground: #1A1400;
  --success: #12A150;
  --warning: #E08A00;
}
.dark {
  --brand: #F7C21A;
  --brand-foreground: #1A1400;
  --success: #3DD68C;
  --warning: #FFB547;
}
@theme inline {
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --animate-marquee: marquee var(--marquee-duration, 30s) linear infinite;
  --animate-shimmer: shimmer 2.4s linear infinite;
  --animate-ping-slow: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(calc(-50% - var(--marquee-gap, 1rem) / 2)) } }
  @keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
}

3. Add a free component

npx shadcn@latest add https://facadeui.com/r/open-now-badge.json

The file lands in components/facade/open-now-badge.tsx. Import it like any other component.

4. Connect Pro (once)

After checkout you receive a license key by email. Put it in .env.local:

FACADE_LICENSE_KEY=your-license-key

Then register the private registry in components.json:

{
  "registries": {
    "@facade": {
      "url": "https://facadeui.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${FACADE_LICENSE_KEY}" }
    }
  }
}

Now every item installs by name, free or Pro:

npx shadcn@latest add @facade/valuation-funnel @facade/booking-slots

Theming

Change --brand and the whole library follows. Radius comes from --radius. All motion respects the visitor's reduced motion setting.