How to install shadcn/ui with Laravel

Laravel + Inertia + React + shadcn/ui gives you the best of both worlds—Laravel's powerful backend with React's interactive UI, without building a separate API.

Quick setup with Inertia

laravel new my-app --react
cd my-app

npx shadcn@latest init

npx shadcn@latest add button card form

// resources/js/Pages/Dashboard.tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function Dashboard({ users }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>User Dashboard</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Total users: {users.length}</p>
        <Button>Add User</Button>
      </CardContent>
    </Card>
  );
}

File structure

Deployment

Deploy Laravel + shadcn/ui apps anywhere Laravel runs:

Next steps

With Laravel + shadcn/ui configured:

1. Browse official components for forms, tables, and UI elements
2. Add charts for data visualization
3. Explore community components for extended functionality
4. Add useful hooks to enhance your components
5. Use pre-built blocks to quickly build common layouts

Laravel's backend power combined with shadcn/ui's flexible components creates a powerful full-stack development experience.

Questions you're probably thinking