tweakcn

tweakcn は shadcn/ui 向けのビジュアルテーマエディター兼ジェネレーター。リアルタイムプレビュー、Tailwind CSS v4/v3対応、コミュニティ閲覧やAIテーマ生成も可能。

概要

tweakcn は shadcn/ui 向けのビジュアルテーマエディター兼ジェネレーターです。色、タイポグラフィ、その他のテーマプロパティをライブプレビューで変更しながら、開発者がカスタムテーマを作成・調整できるようにします。

この製品は Tailwind CSS v4 と v3 をサポートし、shadcn/ui およびカスタムスタイルで動作します。また、CSS 変数または Shadcn Registry コマンドをプロジェクトへコピーしてエクスポートする経路を提供します。ホームページでは、サインアップ不要で始められることに加え、コミュニティテーマや AI 支援のテーマ作成も打ち出されています。

shadcn/ui のテーマ設定を強力に支えるツール

カラーコントロール

テーマトークンを手作業で編集する代わりに、ビジュアルインターフェースで背景、テキスト、境界線、アクセント、チャート、サイドバーの色を調整できます。

タイポグラフィ設定

フォントサイズ、ウェイト、テキスト変換を調整して、テーマを UI のトーンや階層に合わせられます。

Tailwind バージョンサポート

OKLCH や HSL などの対応カラーフォーマットを使いながら、Tailwind v4 と v3 を切り替えて作業できます。

詳細なプロパティ編集

角丸、余白、影、その他のテーマプロパティを編集して、コンポーネントの見た目をより細かく制御できます。

コントラストチェッカー

編集しながらコントラスト比を確認し、エクスポート前にアクセシビリティ上の問題を見つけられます。

AI テーマ生成

AI フローで画像やプロンプトからテーマを作成し、その後エディタで微調整できます。

チームが tweakcn を使う一般的な方法

カスタムアプリテーマを作成する
プリセットやコミュニティテーマから始めて、色、角丸、タイポグラフィを調整し、デザインを特定の製品ブランドに合わせます。
アイデアからテーマを生成する
AI テーマフローを使って画像やプロンプトから出発点を生成し、エディタで結果を微調整します。
実装可能なテーマをエクスポートする
結果をプレビューしたあと、CSS 変数または Shadcn Registry コマンドで書き出して、テーマ設定をプロジェクトに取り込みます。
コミュニティデザインを探索して再利用する
公開コミュニティテーマを閲覧してインスピレーションを得たり、minimal、professional、dashboard、cyberpunk などのタグでスタイルを比較したりします。
デザイン中にコントラストを検証する
色を調整しながらコントラスト比を確認し、アクセシブルな UI に近いテーマを保ちます。

Pros and Cons

Pros

リアルタイムプレビューにより、エクスポート前にテーマ変更を確認しやすくなります。
手動カスタマイズと AI 支援のテーマ生成の両方に対応しています。
無料プランでも完全なテーマカスタマイズとエクスポート機能が利用できます。
コミュニティテーマは、例として参照したり既存デザインを閲覧したりする場を提供します。
料金体系はシンプルで公開されており、無料枠と月額 Pro オプションがあります。

Cons

公開ソースでは、エディタのすべての機能や統合について詳細までは明記されていません。
一部の Pro 機能は高レベルでのみ説明されており、プラン項目に記載された内容を超える正確な制限はソースからは確認できません。

FAQ

tweakcn とは何ですか？

tweakcn は shadcn/ui 向けのビジュアルテーマエディター兼ジェネレーターです。色、タイポグラフィ、レイアウト関連のプロパティをカスタマイズし、変更内容をリアルタイムでプレビューして、結果をコードまたは CSS 変数としてエクスポートできます。

tweakcn は無料ですか？

はい。料金ページには Free プランと Pro プランがあります。Free プランには、完全なテーマカスタマイズ、AI 生成テーマ 5 件、最大 10 件までのテーマ保存と共有、CSS 変数によるインポート/エクスポート、Shadcn Registry コマンドによるエクスポート、コントラストチェッカーが含まれます。

Pro には何が含まれますか？

Pro では、保存および共有できるテーマが無制限になり、AI 生成テーマも無制限、画像ベースのテーマ生成、優先サポート、独自のフォントとカラーを保存できる機能が追加されます。

tweakcn は Tailwind v4 をサポートしていますか？

ソースでは tweakcn が Tailwind CSS v4 をサポートしていることが明記されており、エディタページでは Tailwind v3 も参照されています。料金ページとホームの説明でも、shadcn/ui とカスタムスタイルに対応していることが示されています。

既存のプロジェクトで tweakcn を使えますか？

はい。ホームページにはサインアップなしですぐにカスタマイズを始められるとあり、料金ページには完全なテーマカスタマイズに対応した Free プランがあります。エディタは shadcn/ui プロジェクト向けに位置づけられており、CSS 変数または Shadcn Registry コマンドを通じたテーマのインポート/エクスポートに対応しています。

Quick Facts

カテゴリ: デザインツール / 開発者向けツール
主な用途: shadcn/ui コンポーネントのテーマ設定
対応プラットフォーム / 技術スタック: Web アプリ; Tailwind CSS v4 と v3; shadcn/ui
導入プラン: 無料プランあり; Pro は月額 $8（毎月請求）
主なワークフロー: ビジュアル編集、AI テーマ生成、コミュニティ閲覧、CSS 変数エクスポート、Shadcn Registry エクスポート
ウェブサイト: tweakcn.com