スタイルとテーマ
ブロックはshadcnのテーマトークン（--primary, --card, --radius …）しか使わないので、tweakcnやshadcnテーマエディタで作ったものを含め、どんなshadcnテーマでも動きます。
Theme Studio
Theme Studioでブラウザ上にテーマを作れます。カラープリセット、フォントの組み合わせ、角丸、影、密度を選び、任意のスタイルパックのライブダッシュボードで確認して、globals.cssとnext/fontのlayout.tsxをコピー。リンクにすべての設定が含まれるので、テーマの共有も簡単です。
スタイルパック
Proには12種類のスタイルパックが含まれます。それぞれが<html>の属性ひとつで、すべてのブロック、Coreコンポーネント、あなた自身のshadcnコンポーネントを再スタイルします。goodui NativeのThemeProvider（look="luxe"）にも同じ12種類のルックがあります：
- 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を設定していると無効になります。