Get Started

Installation

Registry is easiest

Install with the shadcn CLI into any Next.js + Tailwind v4 project. The recommended path wires up the foundation once, then every component is a single add away — dependencies resolve automatically.

shadcn registry

Best for new projects. Grab the whole catalog with @byronwade/all — shadcn's generic add --all does not target custom namespaces.

Initialize against the foundation base

The foundation owns your :root tokens and Tailwind theme. Install it with init on a fresh Next.js app (created with --tailwind).

npx shadcn@latest init https://ui.byronwade.com/r/foundation.json

Register the @byronwade namespace

Add one line to your project's components.json so the CLI knows where to resolve @byronwade/*.

{
  "registries": {
    "@byronwade": "https://ui.byronwade.com/r/{name}.json"
  }
}

Add what you need — or everything at once

Want the whole catalog? One command pulls every component (dependencies resolve automatically):

npx shadcn@latest add @byronwade/all

Or add only the pieces you want — transitive dependencies still come along (adding a gauge pulls in status-dot and utils for you):

npx shadcn@latest add @byronwade/gauge
npx shadcn@latest add @byronwade/timeline-rail @byronwade/metric-stat
npx shadcn@latest add @byronwade/sheet @byronwade/command @byronwade/morph-dock

Add a component

Once the namespace is registered, every component page is one command away — each page has a copy button for the exact line.

npx shadcn@latest add @byronwade/button

You can also point the CLI directly at a built component URL without registering the namespace first:

npx shadcn@latest add https://ui.byronwade.com/r/card.json

Manual setup

For existing projects that already have their own theme.

Don't run init on an existing theme

Running init would overwrite your existing globals.css. Merge the tokens by hand instead, then add components.

1. Copy the cssVars (light, dark, and theme) from the foundation item in registry.json into your globals.css.
2. Make sure --ring, --chart-1, and --success derive from var(--brand) so re-skinning holds.
3. Register the namespace and add components as usual.

npx shadcn@latest add @byronwade/badge

Next: Theming Keep your AI on-system