Laravel

Create Project

Create a new Laravel app using the Laravel installer:

Copylaravel 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:

Copycd my-app

Build Your Preset

Open shadcn/create and build your preset visually. Choose your style, colors, fonts, icons, and more.

Run the Command

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset [CODE] --template laravel
Copy

Run the command from the root of your Laravel app.

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

Add Components

Add the Switch component to your project:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add switch
Copy

The command above will add the Switch component to resources/js/components/ui/switch.tsx. You can then import it like this:

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

Run the CLI

Run the sd-ui init command from the root of your Laravel app:

pnpmnpmyarnbun
pnpm dlx shadcn@latest init
Copy

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

Add Components

Add the Switch component to your project:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add switch
Copy

The command above will add the Switch component to resources/js/components/ui/switch.tsx. You can then import it like this:

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