CLI

Instalar con el CLI de shadcn

Los componentes de AlignUI se publican como registry de shadcn. Funciona en cualquier proyecto React con Tailwind CSS v4; los ejemplos usan Next.js App Router.

Registra el namespace @alignui

En el components.json de tu proyecto (créalo si no existe):

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@alignui": "https://alignui-mcp.vercel.app/r/{name}.json"
  }
}

Instala la base

$npx shadcn@latest add @alignui/base

Agrega los tokens de diseño en lib/alignui.css (los importa desde app/globals.css) y las utilidades cn, tv, polymorphic y recursiveCloneChildren.

Agrega componentes

$npx shadcn@latest add @alignui/button @alignui/input @alignui/modal

Cada componente trae sus dependencias de npm y los componentes que usa. También puedes instalar los ejemplos oficiales, por ejemplo @alignui/select-demo.

Fuente, tema y providers

AlignUI está diseñado con Inter. Expónla como --font-inter y mapéala en tu CSS. El modo oscuro es opcional: solo se activa con la clase dark en <html>, nunca por el sistema operativo.

app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "../lib/alignui.css";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --font-sans: var(--font-inter);
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

app/layout.tsx

import { Inter } from 'next/font/google';
import { ThemeProvider } from 'next-themes';

import { Provider as TooltipProvider } from '@/components/ui/tooltip';

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='es' className={inter.variable} suppressHydrationWarning>
      <body>
        <ThemeProvider attribute='class' disableTransitionOnChange>
          <TooltipProvider>{children}</TooltipProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

Si usas notificaciones o toasts, monta una vez <NotificationProvider /> o <Toaster /> en el layout.

Sin configurar el namespace

También puedes instalar directamente con la URL del item:

$npx shadcn@latest add https://alignui-mcp.vercel.app/r/button.json

¿Usas Vite?

La base importa los tokens con ../lib/alignui.css, así que tu CSS de Tailwind debe estar en src/styles/globals.css (en lugar de src/index.css) y declararse así en components.json. Carga Inter con @fontsource-variable/inter. Tu asistente recibe estos pasos al llamar a alignui_get_setup_guide con framework: "vite".