標準のコンポーネントを組み合わせて作ったshadcn/uiのブロックを8種類紹介します。ログインカード、統計、料金の切り替え、設定、タブ、削除の確認、空の状態、チーム一覧で、それぞれライブプレビューとコピーできるコードが付いています。
shadcn/uiは、依存パッケージとしてインストールするのではなく、専用のCLIでプロジェクトにコピーして使うReactコンポーネントのセットです。Radixのプリミティブを土台にしており、Tailwindでスタイルが付けられています。その真価は組み合わせにあります。以下では、ログインカード、料金の切り替え、削除の確認など日常的によく使う8つのブロックを、それぞれライブ表示とコード付きで紹介します。
得られるもの
プレビューは、同じコンポーネントを当サイト独自にコピーしたものを使ってこのページ上で動いており、当サイトの配色でテーマ設定しているため、ボタンや角の丸みが標準のテーマとは少し異なります。コードは素のshadcn/uiで、最初に示す追加コマンドを実行すればそのまま動作します。
はい。shadcn/uiはMITライセンスのオープンソースなので、商用プロジェクトでもコンポーネントを使用、改変できます。
一般的な意味では違います。更新するためのコンポーネントのパッケージは存在せず、CLIがソースコードをプロジェクトにコピーし、それ以降はあなたのものになります。そのため変更は簡単ですが、更新は手作業になります。
はい。Tailwindを使っていれば、Vite、React Router、Reactを使ったAstroなど、どんなReact環境でも動作します。初期化の際に、CLIが使っているフレームワークを尋ねてきます。
公式サイトにはブロック集があり、それを使ってページ全体を作るコミュニティのテンプレートも数多くあります。手早く始めるなら、ここにあるようなセクションを組み合わせてページを作るか、マーケティング用のサイトにはWebサイトビルダーを使い、shadcn/uiはアプリ側で使いましょう。
shadcn/uiはnpmからインポートするパッケージではありません。CLIが各コンポーネントのソースコードをプロジェクトにコピーするので、コードは自分のものになり、編集もできます。
各ブロックで使うコンポーネント
Card、Label、Input、Button を使います。すべての入力欄に、紐付けられた見えるラベルがあり、補助的なリンクは関連するラベルの横に置いています。
レスポンシブなグリッドに3枚のカードを並べます。等幅数字の指定で、数値が変わっても表示がずれません。
スイッチで月額と年額の料金を切り替えます。ラベルはクリックでき、料金の変化はライブリージョン内にあるため読み上げられます。
各行で、ラベルと説明文をスイッチと組み合わせています。ラベルを入力欄に紐付けると、小さなトグルだけでなくテキスト全体がクリックできるようになります。
shadcnのタブはRadixの上に作られているので、矢印キー、Home、End が最初から使え、ARIAのロールも設定済みです。
ダイアログが、フォーカスの閉じ込め、Escapeキー、トリガーへのフォーカスの復帰を処理します。削除ボタンには、何が起こるのかを正確に書きましょう。
親しみやすい空の状態では、ここに何が表示されるのかを伝え、それを埋めるための1つのアクションを提示します。
アバターは写真を表示し、写真がない場合や読み込み中の場合はイニシャルを代わりに表示します。画像には、その人の名前を示す代替テキストが必要です。
フォームやデータテーブルを作っていますか？ こちらをご覧ください：
前日にお客様へメールを送ります。
来店のたびにレビューをお願いします。
オーナー
スタイリスト
ログイン
予約時に使ったメールアドレスを入力してください。
メールアドレス
パスワード
お忘れですか？
年払い
Studio
Studioを選ぶ
通知
プロフィール
お支払い
名前、写真、自己紹介。
プランと請求書。
ページを削除
「About us」を削除しますか？
ページとそのメニューのリンクが削除されます。元に戻すことはできません。
ページを残す
削除しました（デモのみ。実際には何も削除されていません）。
まだ予約はありません
予約リンクを共有すると、新しい予約がここに表示されます。
予約リンクをコピー
手動で追加
無料で始める · クレジットカード不要