Get started

Installation

SupaUI is a shadcn/ui-compatible registry. You copy the source straight into your project and own it from there.

1. Project requirements

Next.js 15 (or any React 18+ stack)
Tailwind CSS v4 (we lean on the new @theme CSS API)
TypeScript

2. Initialise shadcn in your app

If you haven't already, scaffold a shadcn project — SupaUI piggybacks on the same components.json + alias contract.

bash

npx shadcn@latest init

3. Pull in the SupaUI theme

The theme registers our pixel + serif fonts and rebinds shadcn variables to SupaUI tokens. Add it once and every component you copy from the registry inherits the voice.

bash

npx shadcn@latest add https://supaui.dev/r/theme.json

That's it for the bedrock.

One command writes globals.css and copies the Departure Mono webfont to /public/fonts.

4. Add components on demand

Each component is a registry item; add only what you ship.

bash

npx shadcn@latest add https://supaui.dev/r/button.json
npx shadcn@latest add https://supaui.dev/r/badge.json
npx shadcn@latest add https://supaui.dev/r/card.json

5. Use them

tsx

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

export default function Demo() {
  return (
    <div className="flex gap-3">
      <Button tone="accent">Save changes</Button>
      <Badge tone="success" variant="solid">Shipped</Badge>
    </div>
  );
}