shadcn/createの紹介 – 自分だけのshadcn/uiを作ろう すべてをカスタマイズしましょう。コンポーネントライブラリ、アイコン、ベースカラー、テーマ、フォントを選んで、他のものと違うものを作りましょう。 現在、Next.js、Vite、TanStack Start、v0で利用可能です。

最初のコミットから、shadcn/uiの目標は、間隔、色トークン、アニメーション、アクセシビリティなどしっかりしたデフォルトを設定し、そこから自由に進めることです。 コードを調整する。新しいコンポーネントを追加しましょう。色を変えてください。 NPX Shadcn Createでさらに簡単にしています。

まずはコンポーネントライブラリから始めましょう:RadixやBase UIです。 ベースUIの全コンポーネントを再構築し、同じ抽象化を維持しました。既存のコンポーネント、リモートレジストリから取得したものとも完全に互換性があります。 コンポーネントを追加すると、ライブラリを自動検出し、適切な変換を適用します。

また、ユニークなものを作るための5つの新しいビジュアルスタイルも追加します。 1. Vega – クラシックなshadcn/uiの見た目。 2. ノヴァ – コンパクトなレイアウトのためのスペース短縮。 3. マイア – 柔らかく丸みを帯びており、間隔が広く。 4. ライラ – 角が長く鋭い。モノラルフォントと相性が良いです。 5. ミラ – コンパクト。密集したインターフェース向けに作られています。

これはテーマを超えた問題です。 設定は単に色を変えるだけでなく、コンポーネントコードをあなたの設定に合わせて書き換えています。フォント、間隔、構造、さらには使うライブラリまで、すべてがあなたの好みに合わせて調整されます。 新しいCLIがすべてを処理してくれます。

試してみてください。クリック +新しいプロジェクト 素晴らしいコンポーネントライブラリを築いた@base_uiチームに特別な感謝を。彼らの仕事のおかげで、抽象を壊すことなくすべてを簡単に構築できました。巨大。