tweakcnとは｜shadcn/uiのテーマをノーコードで視覚編集しCSSを吐く使い方を実機解説

tweakcn（jnsahaj/tweakcn）は、Tailwind CSSとshadcn/uiのコンポーネントを対象にした「ビジュアルテーマエディタ」です（GitHubスター10,174・Apache-2.0・2026年7月19日時点の実測）。shadcn/uiで組んだ画面は、便利な反面「どれも同じ見た目」になりがちだ——という悩みは、使ったことがある人なら覚えがあるはずです。デフォルトの黒白基調のまま量産され、どのサービスも判で押したように似てしまう。tweakcnは、その「見た目の個性」を、コードを書かずに画面上で作れるようにするツールです。

やることはシンプルです。ボタンやカード、ダッシュボードが並んだプレビューを見ながら、左のパネルで色・タイポグラフィ・角丸・影といった「デザイントークン」を触る。すると変更が全画面に即反映され、気に入ったところでCSS変数として書き出す。書き出したものは自分のshadcn/uiプロジェクトに数分で取り込める——それだけです。まずは、実際にプリセットを切り替え、ダークモードにして、生成されたCSSを表示するまでを録画した様子をご覧ください。

なお、色・タイポ・コンポーネントといった「デザインの土台」そのものの考え方を先に整理したい場合は、当サイトのデザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】を読むと、本記事の位置づけ（＝そのうち「トークン層を作る道具」）が掴みやすくなります。

tweakcnとは——shadcn/uiの「どれも同じ見た目」問題を解くビジュアルテーマエディタ

まず「tweakcn とは何か」を一言で言えば、shadcn/uiのテーマ（見た目）を、ブラウザ上でノーコードに作るためのエディタです。ここでよくある誤解を潰しておくと、tweakcnはshadcn/uiの代替ではありません。むしろshadcn/uiを前提にして、その上の「見た目」だけを担当する道具です。

shadcn/uiは、ボタンやダイアログのコードを自分のリポジトリにコピーして使う「コンポーネントの配り方」で人気になりました。その配色やサイズ感は、--backgroundや--primaryといったCSS変数（デザイントークン）で決まります。つまりshadcn/uiのテーマを変えるとは、突き詰めればこのCSS変数を書き換えることです。ところが、この変数を手で調整する作業は想像以上に面倒です。1色変えるたびにブラウザをリロードし、ボタン・フォーム・チャート・空状態・ダークモードと、あちこちを見て回って可読性を確かめなければなりません。これがshadcn/ui カスタマイズでみんながぶつかる地味な壁です。

tweakcnは、その往復をまるごと画面の中に閉じ込めます。公式の言葉を借りれば「shadcn/uiのコンポーネントを視覚的にカスタマイズし、あなたのUIを目立たせる」ためのツール。左に編集パネル、右に全コンポーネントを並べたライブプレビューを置き、トークンを1つ動かすと右側が丸ごと更新される。下の画面が、その編集画面です。

パネルの構成を見ると、tweakcnが「色ピッカー」ではなくデザインシステムのトークンを丸ごと扱うツールだと分かります。色だけでもPrimary/Secondary/Accentに加え、カードやポップオーバー、境界線と入力欄、チャート、サイドバーまで個別に持ち、oklch表記で管理されています。Typographyタブではフォント、Otherタブでは角丸（radius）や影（shadow）、余白（spacing）を触れます。「shadcn テーマ エディタ」として検索して辿り着く人が本当に欲しいもの——全部のトークンを一望して、プレビューを見ながら詰める——がそのまま画面になっているわけです。

何ができるのか：色・タイポ・角丸を編集し、AI生成と43プリセットでCSS変数を吐く

tweakcnで「できること」を、読者が気にする3つの問い——何ができる／何を解決する／何を代替できる——に沿って具体化します。

まず何ができるか。中核は、shadcn/uiのデザイントークンを画面上で編集し、その結果を機械が読める形式で書き出すことです。触れるトークンは大きく3系統あります。

・色（Colors）：背景・前景・Primary・Secondary・Accent・Muted・Destructive・境界線・チャート・サイドバーなどを、ライト/ダークそれぞれで指定。表記はoklchが既定で、知覚的に均一な色空間で調整できる
・タイポグラフィ（Typography）：見出し/本文/等幅のフォントを差し替え。Google Fontsから選べる
・その他（Other）：角丸（radius）、影（shadow）、文字間・余白といった「形」のトークン

なぜoklchが既定なのかにも触れておきます。従来のhslやhexは、数値をいじると明るさが不揃いに感じられることがありますが、oklchは人間の知覚に近い明度・彩度・色相で表すため、「Primaryだけ少し暗く」といった微調整が破綻しにくいのが利点です。tweakcnはこのoklchを既定にしつつ、出力時にhslへ変換もできるので、Tailwind CSS テーマを古い世代のプロジェクトに合わせることもできます。

そして、これらを変えるたびに右側のプレビューが即座に追従します。プレビューは単なる色見本ではなく、Cards（統計カードやフォーム）・Dashboard・Application・Marketingといった実アプリに近い画面が用意されているので、「このPrimaryだと送信ボタンが沈む」「このborderだとテーブルが窮屈」といった判断を、抽象的な色コードではなく完成画面で下せます。可読性が不安ならコントラストチェッカー（無料プランに含まれる）で、前景と背景のコントラスト比を確認できます。ちなみにこのプレビューは今も拡張が続いており、Application／Marketing のタブは2026年6月にマージされたPR #282（feat: add Application and Marketing preview tabs）で追加されたものです。自分のアプリの種類に最も近いタブでテーマを詰めるほど、実戦での見え方とのズレが減ります。ダッシュボード主体のSaaSなら Dashboard、ランディングページ寄りなら Marketing、といった具合に、プレビューの選択自体がテーマ設計の一部だと考えると失敗が減ります。

次に何を解決するか。解決するのは「テーマ調整の試行錯誤ループが遅い」という問題です。手書きなら「CSSを直す→保存→リロード→複数画面を見て回る」を延々繰り返しますが、tweakcnはこのループを1画面・即時反映に圧縮します。加えて、ゼロから配色を決める負担も43種類のプリセットで肩代わりします。プリセットには汎用的なModern MinimalやClean Slateだけでなく、Catppuccin・Cyberpunk・Neo Brutalismのような個性派、さらにClaude・Supabase・Vercel・Twitter・T3 Chatといった実在サービス風のテーマまで含まれます。「まず近いプリセットを当てて、そこから少し崩す」のが現実的な速い作り方です。

そして、もう一つの入口がAIによるテーマ生成（左パネルの✨Generate）です。開くと「What can I help you theme?」という入力欄と、Create / Remix / Tweak の3モード、そして「Retro Terminal UI, green phosphor glow」「Monochrome Manga-inspired theme」といった例文プロンプトが並びます。入力欄の下には画像添付アイコンもあり、画像からテーマを起こすこともできます。ここは正直に線引きすると、AI生成は「サインインが必要」で、無料プランで使えるのは5テーマまで、Proにすると無制限＋画像からの生成が解放されます。色・タイポ・角丸を手で詰めてCSSを書き出す中核機能はログイン不要・無料で完結し、AI生成の多用だけが有料寄り、という構造です。

最後に何を代替できるか。tweakcnが置き換えるのは、「Figmaでカラーパレットを試作→手でCSS変数に書き起こす」という往復や、既存のカラージェネレータで色を選んでからhsl値を手作業でトークンに割り当てる手間です。tweakcnはプレビューと出力が地続きなので、色を決めた瞬間にそのままshadcn/uiで使えるCSS変数が手に入ります。実際、上部の「Export to Figma」ボタンでFigmaへ持ち出すこともでき、デザイン→実装の橋渡しにも使えます。全体像を図にすると、次のようなループになります。

図にすると、tweakcnの正体は「編集 → プレビュー → 書き出し → 適用」というループを画面に閉じ込めたものだと分かります。AI生成はこのループの入口を一つ増やすオプションであって、必須ではありません。

実機で試す：テーマを編集 → エクスポート → 自分のshadcn/uiプロジェクトに適用

ここが本記事の核心です。日本語の解説が薄いこのツールについて、tweakcn 使い方の本丸「触って、書き出して、自分のプロジェクトに入れる」までを実測でたどります。手順は驚くほど短いです。

① 編集する。 https://tweakcn.com/editor/theme を開き、プリセットを選ぶか、左パネルで色・タイポ・角丸を調整します。冒頭の動画のように、プリセット「Bubblegum」を当てると、プレビューだけでなくtweakcn自身のUIまで一気にピンク基調へ変わります。ダーク切り替えを押せば、その配色のダークモード版も同時に設計できます。すでに手元にテーマがあるなら、上部のImportから既存のCSS変数を読み込んで、その続きから編集することも可能です。逆に、途中まで作った状態を同僚に見せたいときはShareで共有URLを発行できます。

② 書き出す。 気に入ったら右上の {} Code を押します。すると「Theme Code」パネルが開き、生成されたテーマが2つの形で手に入ります。

1つ目はCSS変数。index.css タブに、:root { --background: oklch(...); --primary: oklch(...); ... } と .dark { ... } がまるごと出力されます。既存プロジェクトのグローバルCSSに貼り替えるだけで反映されます。出力形式はTailwind v4 / v3 と oklch / hsl を切り替えられるので、プロジェクトの世代に合わせられます。

2つ目はshadcnレジストリコマンド。同じパネルの上段に、次のような1行が用意されています。これはshadcn/ui公式の「registry」の仕組みに乗せてテーマを取り込むもので、コマンド一発で適用できます。

# tweakcnが生成したテーマURLを、shadcnのregistry経由で取り込む
npx shadcn@latest add https://tweakcn.com/r/themes/bubblegum.json

③ 適用する。 CSS変数方式なら、コピーした :root と .dark のブロックを、自分のアプリの globals.css（Next.jsなら app/globals.css）の該当箇所に貼り替えるだけ。コンポーネント側のコードは一切触りません。shadcn/uiのボタンやカードは元々これらの変数を参照しているので、変数が変われば全コンポーネントの見た目が同時に変わります。適用にかかるのは実質数分です。

だからこそ、既存のshadcn/uiプロジェクトにも後付けで導入でき、気に入らなければ変数ブロックを元に戻すだけでロールバックできます。テーマの実験コストが極端に低い——これがtweakcnの一番おいしい部分です。なお、レジストリコマンド方式は取り込み時に既存のCSS変数を上書きするため、初回はGitでコミットしてから実行し、差分を確認できるようにしておくと安全です。

最後に、shadcn テーマ 作成を速く仕上げるための実践的なコツを3つ挙げておきます。手戻りを減らすうえで効くポイントばかりです。

・プリセットを起点にする：ゼロから12色を決めるより、目的に近いプリセット（落ち着いた業務系ならClean SlateやGraphite、遊びのあるサービスならBubblegumやCandyland）を当ててから、Primaryとradiusだけ自社らしく寄せる方が破綻しにくい
・ダークを後回しにしない：ライトを固めてからダークに着手すると齟齬が出やすい。tweakcnはライト/ダークを同じ画面で持てるので、要所の色は最初から両モードを見比べて決める
・コントラストを最後に一巡：Primary上のボタン文字やMuted上のプレースホルダは沈みがち。書き出す前にコントラストチェッカーで主要な前景/背景の組み合わせを一度確認しておくと、本番でのアクセシビリティ指摘を減らせる

これらはどれも画面の中で完結するため、CSSを書いては消しの往復に比べて圧倒的に速く回せます。作ったテーマは共有URLでチームに配れるので、デザイナーとエンジニアが同じ画面を見ながら合意する、という進め方もしやすくなります。

tambo・Square UI・手書きCSS変数との違い（住み分けと比較表）

「UIをAIやツールで作る」系のOSSはいくつもあり、混同されがちです。tweakcnの立ち位置を、同じUI生成クラスタの記事とレイヤーで切り分けておきます。

まず、実行時にLLMがReactのUIを組み立てるtamboとは｜LLMがReactのUIを組み立てる『生成UI』SDKの仕組みと使い方を実機解説は、UIの「動き・構造」を生成する側です。ユーザーの発話に応じて、どのコンポーネントをどんなpropsで描くかをLLMが決めます。一方tweakcnが作るのは、そうして描かれるコンポーネントに敷く「見た目のルール（テーマ）」。tamboで組み立てたUIにも、tweakcnのCSS変数を被せられます——両者は競合せず、重なります。

次に、完成レイアウトを配るSquare UI解説｜shadcn/uiレイアウト20種を実機デモで全検証｜MITから独自ライセンスへは、画面の「間取り」を配るテンプレート集です。tweakcnはその間取りに塗る「色・質感」。Square UIのレイアウトを土台に、tweakcnで作ったテーマを当てる、という組み合わせが自然です。ここで一つ、当サイトが以前に指摘した論点にも触れておくと、Square UIは2026年4月にMITから独自ライセンス（再配布禁止）へ変わったのに対し、tweakcnはApache-2.0のまま——ライセンスの素性という点では、tweakcnの方が扱いやすい部類です。

より直接の比較対象は、shadcn/ui公式のThemingと手書きのCSS変数です。次の表に、shadcn/uiのテーマを作る4つの手段を整理します。

表から見えるのは、tweakcnの独自性が「全コンポーネントの実プレビュー」と「そのまま使える出力形式」の2点に集約されるということです。色を選ぶだけのツールや、仕様だけ渡す公式Themingと違い、tweakcnは「決める→見る→出す」が地続きです。逆に、テーマがすでに固まっていて微調整も要らないなら、公式Themingや手書きで十分で、tweakcnを挟む必然性はありません。試行錯誤の量が多いフェーズほど効く道具、という理解が正確です。

無料でどこまで使える？料金・ライセンス・セルフホスト・活性度で見る「tweakcnは使えるか」

「使えるか」を判断するには、お金とライセンス、自前運用の現実、そして開発の活性度を押さえる必要があります。ここは公式の料金ページとリポジトリを実測して整理しました。

料金（tweakcn.com/pricing 実測）。 無料プラン（$0・カード不要）に含まれるのは、フルカスタマイズ／AIテーマ生成5回／テーマの保存・共有10件まで／CSS変数のインポート・エクスポート／shadcnレジストリコマンド出力／コントラストチェッカー。有料のPro（月8ドル）は、AI生成が無制限／画像からのテーマ生成／保存・共有が無制限／独自フォント・カラーの保存／優先サポート。要するに、手で作って書き出す作業はすべて無料で、有料化されているのは主に「AIの使用量」と「クラウド保存の量」です。しかも、繰り返しになりますが編集とエクスポートはログインすら不要。ここはSquare UIの「AIチャットにLLMが入っていない」ような落とし穴とは逆で、無料で本当に使える範囲が広いのがtweakcnの美点です。

ライセンス。 リポジトリのライセンスはApache-2.0。GitHubのライセンス判定も明確にApache-2.0を返し、Square UIのような「READMEはopen-sourceと書くが本文は再配布禁止」といった食い違いはありません。商用・改変・再配布とも、Apache-2.0の条件（著作権表示・変更点の明示など）に従えば自由です。加えてVercel OSS Programに採択されており、README冒頭にそのバッジが掲げられています。オープンソースとしての素性は、現行のUI系OSSの中でも素直な部類です。

セルフホストの実態。 ここは注意が要ります。READMEの「Run Locally」は、git clone → npm install → npm run dev の3ステップだけを示し、いかにも簡単そうに見えます。しかし.env.exampleとコントリビューションガイドを読むと、フル機能を自前で動かすには相応の外部サービスが要ることが分かります。具体的には、テーマ保存やアカウントのためのPostgreSQL（Neonを想定、Drizzle ORMでスキーマ管理）、ログインのためのbetter-auth（GitHub/Google OAuth）、AI生成のためのGoogle（Gemini）/Groqのキー、課金基盤のPolar、フォント取得のGoogle Fonts APIキー——これらの環境変数が並びます。つまり、「トークンを編集してCSSをコピーする」だけならローカルでもすぐ動く一方、保存・ログイン・AI・課金まで含めた“tweakcn.comそのもの”を再現するのはそれなりに重い。多くの人にとっての現実的な使い方は、ホスト版（tweakcn.com）でテーマを作り、生成物のCSSだけ自分のプロジェクトに持ち帰ることです。

活性度・保守体制。 最後に、本番採用の判断材料を、盛らずに並べます。star数やREADMEの主張ではなく、GitHub APIと一次情報で裏を取った数字です。

・注目度・信頼性：⭐10,174・fork 647。shadcn/ui作者本人やVercelのCEO（Guillermo Rauch）が公に言及し、料金ページにもその推薦が並ぶ。Vercel OSS Program採択。注目度とエコシステム内での評価は高い
・活性度：作成は2025年3月、直近のpushは2026年6月11日（本記事執筆の約5〜6週間前）。オープンなissueは55件。日次で動くほどではないが、放棄されてはいない
・バス係数：コミットはjnsahaj氏に647件と大きく偏り、次点は43件。実質的に個人主導で、バス係数は高くない。ここは率直な弱点
・releases 0 の意味：GitHub Releasesは0件。これは欠陥ではなく、バージョンを切らずにtweakcn.comへ継続デプロイするWebアプリだから。ホスト版は常に最新。裏を返せば、セルフホストで「この版に固定して運用」したい場合は、自分でコミットハッシュを固定する必要がある
・言語・スタック：TypeScript 98.7%のNext.jsアプリ。shadcn/ui・Tailwindのエコシステムに正しく乗っている

総合すると、tweakcnは「個人主導ゆえの脆さはあるが、生成物が手元に残るので実害が小さい」タイプのOSSです。フレームワークやランタイムなら、保守が止まれば自分のアプリも止まりますが、tweakcnの成果物はプレーンなCSS変数——一度書き出せば、上流が更新を止めても、あなたのプロジェクトの中で動き続けます。だからこそ「まずホスト版で試し、気に入ったテーマのCSSだけ取り込む」使い方が、リスクとリターンのバランスとして最も理にかなっています。向いているのは、shadcn/uiで複数プロダクトを回していて、見た目の統一と個性化を素早く試したいチーム、あるいは「まずそれっぽい見た目を素早く立ち上げたい」個人開発者です。逆に、テーマがすでに固まっていて変更予定がない、または独自のデザインシステムを別ツールで厳密に管理している場合は、無理に導入する必要はありません。tweakcnはあくまで「shadcn/uiのトークンを素早く試して書き出す」ための道具であり、それ以上でも以下でもない——この割り切りが、過大評価も過小評価もせずに付き合うコツです。

デザインシステムづくり全体の中でtweakcnがどこを担うのかを俯瞰したい場合は、その中の「トークン層を、手を汚さずに素早く試す道具」として位置づけると、過不足なく使いこなせます。tweakcnは、shadcn/uiプロジェクトの見た目を、速く・安全に個性化してくれる——編集とエクスポートは無料・ログイン不要、ライセンスはApache-2.0という事実まで実機で確認できた、素直に薦めやすい一本です。

参照ソース

・tweakcn（jnsahaj/tweakcn 公式リポジトリ） — スター数・ライセンス・コミット履歴を実測
・tweakcn 公式サイト・エディタ本体 — 編集画面・43プリセット・✨Generate・{}Codeエクスポートを実機で確認
・tweakcn Pricing — Free/Proの機能内訳（AI生成回数・保存上限・月8ドル）を実測
・jnsahaj/tweakcn .env.example — セルフホストに必要な依存（Neon/better-auth/Gemini・Groq/Polar/Google Fonts）の一次ソース
・shadcn/ui Theming（公式ドキュメント） — CSS変数によるテーマの仕組み
・shadcn/ui registry（公式ドキュメント） — shadcn add <url> でテーマ/コンポーネントを取り込む仕組み
・Vercel OSS Program — tweakcnが採択されている支援枠