Installation

Register the vert registry, install the theme once, then add components one by one — the CLI copies source into your repo and installs its dependencies.

Step 1

Prerequisites

A React 19 project with Tailwind CSS v4 wired up (CSS-first, no config file).
A components.json at the project root. The shadcn CLI uses it for paths and aliases — create one with npx shadcn@latest init.
The @/* path alias in your tsconfig.json pointing at your source directory, so installed files can import each other.

Step 2

Register the vert registry

Add the registries map to your components.json. The alias can be anything; @vert is the convention used throughout these docs.

{
  "registries": {
    "@vert": "https://vert-ui.dev/r/{name}.json"
  }
}

After this, @vert/<name> resolves to https://vert-ui.dev/r/<name>.json — one JSON item per component, plus the theme and helper items.

Step 3

Install the theme

The theme item carries the design tokens, the base styles and the ready-made themes. Install it once per project:

npx shadcn add @vert/vert

It writes these files into your repo:

styles/vert.css              tokens, utilities, base styles
styles/themes.css             data-theme bridges
styles/themes/slate.css       cool blue-gray preset
styles/themes/sand.css        warm beige preset
styles/themes/midnight.css    dark-first preset
styles/themes/rose.css        muted red preset
styles/themes/ocean.css       deep teal preset

Then import it from your CSS entry. Tailwind must come first — the theme relies on Tailwind v4's @theme and @custom-variant at-rules:

@import "tailwindcss";
@import "./styles/vert.css"; /* path is relative to this file */

Import order matters

@import "tailwindcss" must precede the vert import. If your CSS entry is not at the project root, adjust the relative path (for example ../styles/vert.css from src/).

Step 4

Add your first component

npx shadcn add @vert/button

# multiple at once
npx shadcn add @vert/button @vert/input @vert/card

# or straight from a URL — no registry alias needed
npx shadcn add https://vert-ui.dev/r/field.json

For each component the CLI does three things:

copies the source to components/vert-ui/<name>.tsx, rewriting the shared cn() import to @/lib/vert-ui/cn;
installs the @vert/vert-cn helper (lib/vert-ui/cn.ts) the first time it is needed;
adds the component's npm dependencies — Radix primitives, class-variance-authority and friends — to your package.json.

Installing components:
- components/vert-ui/button.tsx
- lib/vert-ui/cn.ts

Adding dependencies:
- @radix-ui/react-slot
- class-variance-authority

Render it straight away — no provider, no wrapper, no library import:

import { Button } from "@/components/vert-ui/button"

export function Example() {
  return <Button>Save changes</Button>
}

Alternative

Manual installation

No CLI? Every registry item is plain source in a JSON envelope. Fetch the item and paste the file contents into your project:

curl https://vert-ui.dev/r/button.json

Each entry in files[].content is ready to paste — the cn() import is already rewritten and the npm dependencies are listed in dependencies. You still need the vert-cn helper (item vert-cn) and the theme (item vert) by the same method.

Maintenance

Updates and customization

You own the installed files. Edit them freely — that is the whole delivery model. Two things to keep in mind:

Re-running npx shadcn add @vert/button overwrites the local file with the upstream source. Commit first so git diff can show you what changed.

Never blindly overwrite a component you have heavily customized — port the upstream changes by hand instead.

Verify and continue

Start your dev server — the component should render with the vert theme applied. If styles are missing, check that the Tailwind import comes first and that your components.json registry map matches the snippet above.

Continue with Getting Started for themes, tones and your first composed screen — or browse the component catalog.