Installation

Set up a project with the shadcn CLI, then add components to it.

New project

pnpm dlx shadcn@latest init https://ui.jarv.is/r/base.json @jarvis/button -t vite

This creates a Vite app with the theme, the Inter font, the @jarvis registry and a Button. List more components after @jarvis/button to add them too.

Existing project

Leave out -t vite to set up an existing Vite or Next.js app instead.

pnpm dlx shadcn@latest init https://ui.jarv.is/r/base.json

If the project already uses the shadcn CLI with Base UI, just add the registry.

pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json

Adding components

Add components by name.

pnpm dlx shadcn@latest add @jarvis/button @jarvis/dialog

The first one replaces lib/utils.ts with a version that adds cva alongside cn. Let it overwrite the file when asked.

You can also pass a component's page URL, as in shadcn add https://ui.jarv.is/components/button.

Usage

Components go in components/ui.

components/save-button.tsx

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

export function SaveButton() {
  return <Button variant="primary">Save changes</Button>;
}