Styles and theming

Blocks only use shadcn theme tokens (--primary, --card, --radius …), so any shadcn theme works, including themes made with tweakcn or the shadcn theme editor.

Theme Studio

Build a theme in the browser with the Theme Studio: pick a color preset, a font pairing, radius, shadows and density, preview it on a live dashboard in any style pack, then copy globals.css and a next/font layout.tsx. The link keeps every setting, so a theme is easy to share.

Style packs

Pro includes 12 style packs. Each one restyles every block, the Core components and your own shadcn components with one attribute on <html>. goodui Native has the same 12 looks on its ThemeProvider (look="luxe"):

• Clean: Default shadcn/ui. Calm and familiar.
• Neobrutal: Thick borders, hard shadows, loud color.
• Glass: Frosted panels over a soft aurora.
• Retro 98: Bevels, title bars and a teal desktop.
• 8-bit: Pixel borders and arcade type.
• Terminal: Green phosphor on black, scanlines on.
• Editorial: Serif titles, hairlines, warm paper and oxblood.
• Soft: Clay surfaces, big radius, shadows instead of borders.
• Neon: Deep navy, cyan and magenta glows, a faint grid.
• Paper: Ink lines, stamp badges and mono labels on stock.
• Swiss: White, black, one red. Flat, square, dense.
• Luxe: Near-black, serif titles and gold hairlines.

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

Dark mode works as it does in shadcn: add the dark class to <html>. Every style has a dark variant.

Reduced motion

Animated effects, such as the terminal scanlines, turn off when the user has prefers-reduced-motion set.