Laravel

プロジェクトの作成#

Laravel インストーラーを使用して新しい Laravel アプリを作成します。

コピーlaravel new my-app

React と Inertia がすでに構成された Laravel アプリがある場合は、この手順を省略してください。

プロンプトが表示されたら、React スターター キットを選択します。詳細については、公式の Laravel フロントエンド ドキュメント を参照してください。

次に、プロジェクト ディレクトリに移動します:

コピーcd my-app

プリセットを構築する#

shadcn/create を開いてプリセットを視覚的に構築します。スタイル、色、フォント、アイコンなどを選択します。

コマンドを実行する#

Create Project をクリックし、パッケージ マネージャーを選択し、生成されたコマンドをコピーします。

生成されるコマンドは次のようになります。

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset [CODE] --template laravel
コピー

Laravel アプリのルートからコマンドを実行します。

components.json とコンポーネントを上書きするように求められたら、Yes を選択します。

コンポーネントの追加#

Switch コンポーネントをプロジェクトに追加します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add switch
コピー

上記のコマンドは、Switch コンポーネントを resources/js/components/ui/switch.tsx に追加します。次に、次のようにインポートできます。

コピーimport { Switch } from "@/components/ui/switch"
 
const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}
 
export default MyPage

CLI を実行します#

Laravel アプリのルートから shadcn init コマンドを実行します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
コピー

components.json とコンポーネントを上書きするように求められたら、Yes を選択します。

コンポーネントの追加#

Switch コンポーネントをプロジェクトに追加します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add switch
コピー

上記のコマンドは、Switch コンポーネントを resources/js/components/ui/switch.tsx に追加します。次に、次のようにインポートできます。

コピーimport { Switch } from "@/components/ui/switch"
 
const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  )
}
 
export default MyPage