shadcn.io is not affiliated with official shadcn/ui

Docs

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 (opens in a new tab).

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:

shadcn CLILocked

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email

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:

shadcn CLILocked

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email

You can also install every component at once:

shadcn CLILocked

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email

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:

shadcn CLILocked

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email

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:

shadcn CLILocked

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email

You can also install every component at once:

shadcn CLILocked

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email

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;