Laravel

A guide on installing and configuring shadcn/ui components for use within a Laravel project, specifically with Inertia and React.

Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use shadcn@2.3.0.

Step 1: Initialize Your Laravel Project

Begin the installation process by creating a new Laravel project. Utilize the Laravel installer with the --react flag to set up a project pre-configured with Inertia and React:

laravel new my-app --react

Step 2: Integrate Individual Components

You are now ready to begin adding individual shadcn/ui components to your Laravel project as needed.

npx shadcn@latest add switch

Executing the command shown above will add the Switch component files to your project structure, typically located at resources/js/components/ui/switch.tsx. You can then import and use the component in your React files within the Laravel project as demonstrated below:


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

export default MyPage;

Vite React Router