2025 年 12 月 - npx shadcn create

最初のコミットから、shadcn/ui の目標はカスタマイズ可能にすることでした。

このアイデアは、明確なデフォルト、間隔、カラートークン、アニメーション、アクセシビリティを提供し、そこから利用できるようにすることです。コードを微調整します。新しいコンポーネントを追加します。色を変更します。独自のバージョンを構築します。

しかし途中から、すべてのアプリが同じように見えるようになりました。デフォルト設定が少し良すぎたのだと思います。悪いです。

今日、これを npx shadcn create に変更します。

すべてをカスタマイズします。コンポーネント ライブラリ、アイコン、基本色、テーマ、フォントを選択し、独自のバージョンの shadcn/ui を作成します。

私たちは、あなたの UI が実際にあなたの UI のように感じられるように設計された 5 つの新しい視覚スタイルから始めます。

• Vega – 古典的な shadcn/ui の外観。
• Nova – パディングとマージンを削減してコンパクトなレイアウトを実現します。
• Maia – 柔らかく丸みがあり、十分な間隔があります。
• Lyra – ボクシーでシャープ。モノスペースフォントとの相性も抜群です。
• Mira – コンパクト。高密度のインターフェース向けに作られています。

これはテーマを超えたものです。

単に色を変更するだけでなく、選択に応じてコンポーネントコードそのものを書き換えます。フォント、間隔、構造、さらには使用するライブラリまで、すべてが好みに合わせて調整されます。

新しい CLI がすべてを処理します。

コンポーネント ライブラリから始めます。 Radix または Base UI のいずれかを選択します。

同じ抽象化を維持しながら、Base UI のすべてのコンポーネントを再構築しました。 これらは、リモート レジストリから取得したものであっても、既存のコンポーネントと完全に互換性があります。

コンポーネントをプルダウンすると、ライブラリが自動検出され、適切な変換が適用されます。

他とは違うものを構築する時が来ました。

Next.js、Vite、TanStack Start、および v0 で利用できるようになりました。