現在、Bootstrap、Bulma、Semantic UIなどのCSSフレームワークがたくさんあります。これにより、ディスプレイ (ユーザー インターフェイス) の構築が高速化されます。現在トレンドの CSS ツールの 1 つは Shadcn/ui ですが、以前は何でしたか?

公式ウェブサイト Shadcn/ui に記載

「コピーしてアプリに貼り付けることができる再利用可能なコンポーネントのコレクション。」

つまり、shadcn/ui は、TailwindCSS と RadixUI を使用して構築された、ビュー内の再利用可能なコンポーネントのコレクションです。現在、Next.js、Laravel などのいくつかのフレームワークをサポートしています。公式ウェブサイト Shadcn/ui.

サポートされている多くのフレームワークのうち。私たちの主な目標は、Laravel Breeze を使用して、Laravel React に Shadcn/ui をインストールする方法です。

最初のステップ: laravel プロジェクトをインストールします。

laravel new laravel-shadcn

ここでは、Laravel インストーラー (グローバル) を使用します。次の段階では、下の画像のようにオプションを選択するよう求められます

プロジェクトのニーズに応じて入力します。その場合は、インストールが完了するまで待ちます。インストール速度はインターネット接続によって異なります。

Laravelプロジェクトのインストールが完了しました。 OK 続行!.

2 番目のステップ: laravel プロジェクトに Shadcn/ui をインストールする

まだ同じ端末内にあります。まず、以下のコマンドを入力します:

cd laravel-shadcn
npx shadcn-ui@latest init

その場合、リクエストが表示されるので、必要に応じて入力します。次の例のように。

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

typescript ユーザーの場合は、[はい]、[OK]、[次へ] を選択できます。 vscode に移動するか、お気に入りのコード エディターに移動します。ここでは vscode を使用し、次のコマンドを使用します

cd laravel-shadcn

code .

自動的に vscode が開き、laravel プロジェクトが開きます。その場合、次のステップは、resource/css/app.css フォルダー内の app.css ファイルを開いて、shadcnui が Laravel プロジェクトに正常にインストールされていることを確認することです。

上の図では、shadcn が Laravel プロジェクトに正常にインストールされています。

説明 ：

• Shadcn は app.css ファイルを自動的に更新します
• ボタン、アラート、テーブルなどのコンポーネントが必要な場合。次に、laravel プロジェクトのルートターミナル経由でインストールする必要があります。 (インターネット接続が必要です)
• 必要なコンポーネントはすべて、ShadcnUI の公式 Web サイトで確認できます。
• コンポーネントのインストールが完了すると、resources/js/Components/ui/Button.jsx フォルダーに新しいファイルが自動的に生成されます。必要に応じてこのファイルを変更することもできます。

ステップ 3: Shadcn がインストールされていることを確認します ShadcnUI がインストールされていることを確認するには、ターミナルでコマンドを実行します。つまり、たとえば、ボタン コンポーネントをインストールします。コマンドは次のとおりです: npx shadcn-ui@latest 追加ボタンは下の画像に表示されています

で2つのターミナルを開きます

ターミナル 1

npm run dev

ターミナル 2

npm run dev

デフォルトが濃い色のボタンコンポーネントが表示されます。