Buscar

Buscar en Kavel...

Menú de documentación

UI

Una biblioteca de componentes con tema construida sobre Base UI (el predeterminado de shadcn), compartida en todo el monorepo.

Qué obtienes

  • Componentes accesibles (botones, tarjetas, diálogos, formularios, pestañas y más) en packages/ui/src/components/ui
  • Un tema de Tailwind v4 con modos claro y oscuro, definido como variables CSS en globals.css
  • El ayudante cn para combinar clases y tu objeto Config.brand

Usar componentes

Importa componentes por subruta desde el paquete de UI:

tsx
import { Button } from "@my-app/ui/components/ui/button";

<Button size="lg">Get started</Button>;

Nota

Son componentes Base UI, no Radix. Donde shadcn usaba asChild, Base UI usa una prop render:
tsx
<Button render={<a href="/sign-up">Sign up</a>} />

Temas

Colores, radios y fuentes son variables CSS en packages/ui/src/styles/globals.css. Edita los bloques :root y .dark para reestilizar toda la app, cada componente lee de estos tokens.

Añadir más componentes

La biblioteca sigue la estructura canónica de shadcn, así que puedes traer cualquier componente adicional con la CLI de shadcn y encajará con el estilo existente.

bash
bunx shadcn@latest add accordion

El módulo páginas de marketing se construye directamente sobre estos componentes.