Instalación

Los componentes se copian a tu proyecto con el CLI de shadcn. El código es tuyo: sin paquete que actualizar ni estilos que pelear.

1. Registra @ssntl

Necesitas React 19 y Tailwind v4 con shadcn ya iniciado. Agrega el registro a tu components.json.

components.json

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

2. Agrega el tema

$ pnpm dlx shadcn@latest add @ssntl/theme

Importa los tokens en tu CSS global. Reemplazan el bloque de colores que escribe shadcn init y siguen el tema del sistema operativo o data-theme en <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. Carga las fuentes

Mona Sans y Geist Mono, autoalojadas con 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. Agrega componentes

$ pnpm dlx shadcn@latest add @ssntl/button