Install shadcn/ui Laravel
How to install shadcn/ui with Laravel and Inertia.js. Setup React components in your PHP application.
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
Create Laravel project with React
laravel new my-app --react
cd my-appThis sets up Laravel with Inertia.js and React preconfigured. If you have an existing Laravel app, you can add Inertia and React manually.
Initialize shadcn/ui
npx shadcn@latest initThe CLI detects Laravel's structure and configures paths correctly. Components will be added to resources/js/components/ui/.
Add your first component
npx shadcn@latest add button card formComponents are placed in the Laravel resources directory where they belong.
Use in Inertia pages
// 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:
| Platform | Setup | Best For |
|---|---|---|
| Laravel Forge | One-click deployment | Official Laravel hosting |
| Laravel Vapor | Serverless Laravel | Scalable serverless apps |
| Digital Ocean | App Platform or Droplets | Cost-effective cloud hosting |
| Traditional hosting | Any PHP host with Node.js | Shared hosting and VPS |
Next steps
With Laravel + shadcn/ui configured:
- Browse official components for forms, tables, and UI elements
- Add charts for data visualization
- Explore community components for extended functionality
- Add useful hooks to enhance your components
- 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.