Styles und Theming

Blöcke nutzen ausschließlich shadcn-Theme-Tokens (--primary, --card, --radius …), jedes shadcn-Theme funktioniert also, auch Themes aus tweakcn oder dem shadcn-Theme-Editor.

Theme Studio

Bau ein Theme im Browser mit dem Theme Studio: Farb-Preset, Schriftpaar, Radius, Schatten und Dichte wählen, auf einem Live-Dashboard in jedem Style-Pack prüfen, dann globals.css und ein next/font-layout.tsx kopieren. Der Link hält jede Einstellung fest, ein Theme lässt sich also leicht teilen.

Style-Packs

Pro enthält 12 Style-Packs. Jedes davon gestaltet jeden Block, die Core-Komponenten und deine eigenen shadcn-Komponenten über ein Attribut auf <html> um. goodui Native hat dieselben 12 Looks auf seinem ThemeProvider (look="luxe"):

• Clean: Standard-shadcn/ui. Ruhig und vertraut.
• Neobrutal: Dicke Ränder, harte Schatten, laute Farben.
• Glass: Milchglas-Panels über einer sanften Aurora.
• Retro 98: Abschrägungen, Titelleisten und ein türkiser Desktop.
• 8-bit: Pixel-Ränder und Arcade-Schrift.
• Terminal: Grüner Phosphor auf Schwarz, Scanlines an.
• Editorial: Serifen-Titel, Haarlinien, warmes Papier und Ochsenblutrot.
• Soft: Ton-Oberflächen, großer Radius, Schatten statt Ränder.
• Neon: Tiefes Marineblau, Cyan- und Magenta-Glows, ein zartes Raster.
• Paper: Tuschelinien, Stempel-Badges und Mono-Labels auf Karton.
• Swiss: Weiß, Schwarz, ein Rot. Flach, eckig, dicht.
• Luxe: Fast-Schwarz, Serifen-Titel und goldene Haarlinien.

<html lang="en" data-style="retro98">

Dark Mode funktioniert wie in shadcn: die Klasse dark auf <html> setzen. Jeder Style hat eine dunkle Variante.

Reduzierte Bewegung

Animierte Effekte wie die Terminal-Scanlines schalten sich ab, wenn beim Nutzer prefers-reduced-motion gesetzt ist.