Installation

Scintillar UI components ship in the shadcn registry format. Each component is one JSON file at https://ui.sntlr.app/r/{name}.json — the shadcn CLI fetches it and writes files directly into your project.

Prerequisites

• Node 18+
• An existing Next.js, Vite, or Remix project with Tailwind 4 configured
• shadcn CLI (ships with npx)

Step 1 — Initialize shadcn

npx shadcn@latest init

Accept the defaults (or customize — the defaults work fine). This creates components.json, lib/utils.ts, and bootstraps app/globals.css with a shadcn base theme.

Step 2 — Apply the Scintillar theme

Scintillar components reference design tokens (--primary, --radius, chart palette, sidebar colors, etc.) that don't match shadcn's defaults. Overlay the Scintillar theme onto your globals.css in one command:

npx shadcn@latest add https://ui.sntlr.app/r/theme.json

This patches your :root { ... } and .dark { ... } blocks with Scintillar's tokens (both light + dark modes). Only needed once per project.

Step 3 — Add components

npx shadcn@latest add https://ui.sntlr.app/r/button.json

This writes components/ui/button.tsx into your project (plus any dependencies the component needs). The CLI follows the registryDependencies field, so installing dialog also installs button transitively.

Optional — register the registry as a default source

Add Scintillar to the registries map in your components.json so you can use shorthand names instead of full URLs:

{
  "registries": {
    "@sntlr": "https://ui.sntlr.app/r/{name}.json"
  }
}

Then:

npx shadcn@latest add @sntlr/theme
npx shadcn@latest add @sntlr/button @sntlr/dialog

Own the code

Components land in your repo. No runtime dependency, no version pinning, no "what version of the library is shipping this bug." If the component doesn't do what you need, open it up and change it — it's yours.