Installation

Add the system to any Next.js, Vite or React project that already runs Tailwind v4.

1. Initialise shadcn

Skip this if the project already has a components.json.

npx shadcn@latest init

2. Register the namespace

Add the registry to components.json so you can address items as @dami/name.

{
  "registries": {
    "@dami": "https://ui.dami.uy/r/{name}.json"
  }
}

3. Install the theme

Writes the colour, radius and shadow tokens into your global CSS for light and dark.

npx shadcn@latest add @dami/theme

4. Add components

npx shadcn@latest add @dami/button @dami/card @dami/badge

# or the whole system
npx shadcn@latest add @dami/all

Without the namespace, the full URL works too: npx shadcn@latest add https://ui.dami.uy/r/button.json.

5. Fonts

The system expects --font-sans and --font-mono on the root element. With Next.js use next/font; Inter and JetBrains Mono are the defaults here.

import { Inter, JetBrains_Mono } from "next/font/google"

const sans = Inter({ variable: "--font-sans", subsets: ["latin"] })
const mono = JetBrains_Mono({ variable: "--font-mono", subsets: ["latin"] })

<html className={`${sans.variable} ${mono.variable}`}>