风格与主题

区块只使用 shadcn 主题 token(--primary, --card, --radius …),所以任何 shadcn 主题都能用,包括用 tweakcn 或 shadcn 主题编辑器做的主题。

Theme Studio

用 Theme Studio 在浏览器里搭建主题:选一个颜色预设、一组字体搭配、圆角、阴影和密度,在任意风格包下的实时仪表盘上预览,然后复制 globals.css 和 next/font 的 layout.tsx。链接会保留所有设置,分享主题很方便。

风格包

Pro 包含 12 个风格包。每个风格包只需 <html> 上的一个属性,就能重新设计所有区块、Core 组件和你自己的 shadcn 组件。goodui Native 在其 ThemeProvider 上有同样的 12 种风格(look="luxe"):

  • Clean: 默认 shadcn/ui。沉稳而熟悉。
  • Neobrutal: 粗边框、硬阴影、大胆的色彩。
  • Glass: 柔和极光上的磨砂面板。
  • Retro 98: 斜面、标题栏和一片青绿色桌面。
  • 8-bit: 像素边框和街机字体。
  • Terminal: 黑底绿荧光,扫描线常开。
  • Editorial: 衬线标题、细线、暖纸色和牛血红。
  • Soft: 黏土质感、大圆角,用阴影代替边框。
  • Neon: 深海军蓝、青色和品红辉光,一层淡淡的网格。
  • Paper: 卡纸上的墨线、印章徽标和等宽标签。
  • Swiss: 白、黑、一抹红。扁平、方正、紧凑。
  • Luxe: 近黑底色、衬线标题和金色细线。
app/layout.tsx
<html lang="en" data-style="retro98">

深色模式和 shadcn 一样:给 <html> 加上 dark 类即可。每种风格都有深色变体。

减弱动态效果

当用户设置了 prefers-reduced-motion 时,终端扫描线等动画效果会关闭。