Estilos y temas

Las plantillas de Pixi’VN construyen la UI con shadcn/ui sobre Tailwind CSS. A diferencia de una biblioteca de componentes normal, shadcn/ui no se distribuye como un paquete: el código fuente de los componentes se copia en tu propio proyecto (en src/components/ui/).

Todo el tema — colores, redondez, fuentes y más — depende de un único archivo: src/styles.css.

Más allá del generador de temas baseCopiar enlace de ancla

En lugar de editar styles.css manualmente, puedes generar un tema completo con una herramienta visual.

Generador de temas de shadcn/uiCopiar enlace de ancla

El generador de temas oficial es un editor visual: eliges un color base, ajustas la paleta para el modo claro y oscuro, y estableces el radio de las esquinas, con una vista previa en vivo de componentes reales de shadcn (botones, tarjetas, campos de entrada, etc.) para que puedas ver el resultado antes de aplicar nada. Cuando estés satisfecho con el resultado, abre la sección Copy de la página: te da un comando listo para ejecutar con la siguiente forma:

npx shadcn@latest add <generated-command>

Ejecutar este comando desde la raíz de tu proyecto obtiene el tema generado y sobrescribe las variables de color/radio en styles.css con él, tal como se describe en Plantillas → Personalizar el estilo.

Una vez que hayas aplicado ese código generado a tu proyecto, ejecuta:

npm run ui:reinit

Esto reinstala forzosamente todos los componentes de shadcn que ya están en tu proyecto directamente desde el registro de shadcn, usando tu styles.css y components.json actualizados, y reformatea los archivos fuente después. Esto mantiene todos los componentes coherentes con el nuevo tema, en lugar de dejarlos con las variables con las que se construyeron originalmente.

tweakcnCopiar enlace de ancla

tweakcn es una alternativa creada por la comunidad al generador de temas oficial. Cubre los mismos colores y radios, pero también añade edición en vivo de fuentes y sombras, e incluye una galería de ajustes predefinidos desde los que puedes partir en lugar de crear una paleta desde cero. También exporta su resultado como variables CSS, por lo que puedes pegar la salida en styles.css de la misma manera, y puedes continuar con npm run ui:reinit.

Estos dos son los generadores de temas más utilizados con shadcn/ui hoy en día. Si te encuentras con otros, lo importante es que generen variables CSS simples (o un comando del registro de shadcn) — cualquier cosa en ese formato se integra en styles.css de la misma manera.