Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

Laravel

Install shadcn.io in a Laravel project.

The shadcn CLI does not scaffold a new Laravel app. Start by creating a Laravel app with the React starter kit, then choose how you want to configure shadcn.io.

Create Project

Create a new Laravel app using the Laravel installer:

laravel new my-app

If you already have a Laravel app with React and Inertia configured, skip this step.

Choose the React starter kit when prompted. For more information, see the official Laravel frontend documentation.

Then move into your project directory:

cd my-app

Use the shadcn.io preset

Initialize shadcn.io in your Laravel app with the registry preset.

Use the CLI

Configure shadcn.io in your Laravel app directly from the terminal.

Use the shadcn.io Preset

Run the Command

Run the init command with the shadcn.io preset and the Laravel template from the root of your Laravel app:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t laravel

When asked to overwrite components.json and components, choose Yes.

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Switch component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/switch.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

resources/js/pages/index.tsx
import { Switch } from "@/components/ui/switch";

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};

export default MyPage;

Use the CLI

Run the CLI

Run the shadcn init command with the shadcn.io preset from the root of your Laravel app:

bunx --bun shadcn@latest init https://kit.dev/r/style.json

When asked to overwrite components.json and components, choose Yes.

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Switch component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/switch.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components like this:

resources/js/pages/index.tsx
import { Switch } from "@/components/ui/switch";

const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};

export default MyPage;