Installation

Components install as source files through the shadcn CLI — no package, no lock-in.

1. Point your project at the registry

Add the @emboss namespace to the registries field of your components.json. If you don't have a components.json yet, run npx shadcn@latest init first.

components.json

{
  "registries": {
    "@emboss": "https://embossui.vercel.app/r/{name}.json"
  }
}

2. Add components

pnpm dlx shadcn@latest add @emboss/button @emboss/switch

The CLI copies the component source into components/ui/, installs its npm dependencies, and merges the Emboss design tokens into your stylesheet the first time. Components can also be added directly by URL without the namespace: npx shadcn@latest add https://embossui.vercel.app/r/button.json.

3. Use them

page.tsx

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button variant="accent">Engage</Button>;
}

The source is yours: restyle it, extend it, delete the parts you don't need. To pull upstream changes later, re-run the add command with --diff to preview or --overwrite to apply.

Prefer copy-paste?

Every component page shows its complete source with consumer-ready import paths, plus the exact dependency install line. Copy both, add the tokens from the Theming page, and you are done — the registry is a convenience, not a requirement.

Dark mode

Tokens flip on a .darkclass. In projects that don't already define it, enable class-based dark mode with one line in your CSS: @custom-variant dark (&:where(.dark, .dark *));