Installation

Components are copied into your project with the shadcn CLI. The code is yours: no package to update and no styles to fight.

1. Register @ssntl

You need React 19 and Tailwind v4 with shadcn already initialized. Add the registry to your components.json.

components.json

{
  "registries": {
    "@ssntl": "https://ui.ssntl.app/r/{name}.json"
  }
}

2. Add the theme

$ pnpm dlx shadcn@latest add @ssntl/theme

Import the tokens in your global CSS. They replace the color block shadcn init writes, and follow the OS theme or data-theme on <html>.

app/globals.css

@import "tailwindcss";
@import "../styles/ssntl/tokens.css";
@import "../styles/ssntl/motion.css";
@import "../styles/ssntl/theme.css";

@theme inline {
  --font-sans: var(--font-mona-sans), system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

3. Load the fonts

Mona Sans and Geist Mono, self-hosted with next/font.

app/layout.tsx

import { Geist_Mono, Mona_Sans } from "next/font/google"

const monaSans = Mona_Sans({ subsets: ["latin"], variable: "--font-mona-sans", axes: ["wdth"] })
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })

<html className={`${monaSans.variable} ${geistMono.variable}`}>

4. Add components

$ pnpm dlx shadcn@latest add @ssntl/button