Installation

Components are distributed through a shadcn-compatible registry. The CLI copies source into your codebase — you own the files, and you edit them directly.

Prerequisites

• React 19 and Tailwind CSS v4 wired into your build (@tailwindcss/vite or @tailwindcss/postcss), plus TypeScript.
• A @/* path alias pointing at your source root, in both places:
  • tsconfig.json → "paths": { "@/*": ["./src/*"] }
  • your bundler — Vite needs resolve: { alias: { "@": "/src" } }; Next.js reads tsconfig paths on its own.

Map the @sc1m namespace

Add the registry to your project's components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "utils": "@/lib/cn",
    "hooks": "@/hooks"
  },
  "registries": {
    "@sc1m": "https://sc1m.vercel.app/r/{name}.json"
  }
}

Point tailwind.css at your global stylesheet — that is the file the token layer gets merged into. Set "rsc": true in Next.js App Router projects.

Add a component

npx shadcn@latest add @sc1m/switch

Every component declares tokens and cn as registry dependencies by absolute URL, so a single add also:

• merges the full token layer into your CSS — the @theme inline contract, the default brand's :root values, .dark overrides, the dark custom variant, and the popup-motion utility;
• installs src/lib/cn.ts;
• installs the npm dependencies (@base-ui/react, clsx, tailwind-merge).

Two consequences worth knowing: you cannot install a component without its tokens, and a bare name can never resolve against shadcn's own registry by accident.

App-level setup, once

.root { isolation: isolate; }

Browsing what's available

Every item is listed in registry.json, or in the Components section of these docs.