Estilos y temas
Los bloques solo usan los tokens de tema de shadcn (--primary, --card, --radius …), así que cualquier tema de shadcn funciona, incluidos los hechos con tweakcn o con el editor de temas de shadcn.
Theme Studio
Crea un tema en el navegador con el Theme Studio: elige un preset de color, una pareja de fuentes, radio, sombras y densidad, pruébalo en un dashboard real con cualquier pack de estilos y copia globals.css y un layout.tsx con next/font. El enlace guarda cada ajuste, así que compartir un tema es fácil.
Packs de estilos
Pro incluye 12 packs de estilos. Cada uno restiliza todos los bloques, los componentes Core y tus propios componentes de shadcn con un atributo en <html>. goodui Native tiene los mismos 12 looks en su ThemeProvider (look="luxe"):
- Clean: shadcn/ui tal cual. Sereno y familiar.
- Neobrutal: Bordes gruesos, sombras duras, color a gritos.
- Glass: Paneles esmerilados sobre una aurora suave.
- Retro 98: Biseles, barras de título y un escritorio turquesa.
- 8-bit: Bordes pixelados y tipografía arcade.
- Terminal: Fósforo verde sobre negro, con scanlines.
- Editorial: Títulos con serifa, filetes finos, papel cálido y rojo sangre.
- Soft: Superficies de arcilla, radio generoso, sombras en vez de bordes.
- Neon: Azul marino profundo, brillos cian y magenta, una rejilla tenue.
- Paper: Líneas de tinta, sellos y etiquetas mono sobre cartulina.
- Swiss: Blanco, negro, un rojo. Plano, cuadrado, denso.
- Luxe: Casi negro, títulos con serifa y filetes dorados.
<html lang="en" data-style="retro98">El modo oscuro funciona como en shadcn: añade la clase dark a <html>. Cada estilo tiene su variante oscura.
Movimiento reducido
Los efectos animados, como las scanlines del estilo terminal, se desactivan cuando el usuario tiene prefers-reduced-motion activado.