Laravel

Install Default File UI in Laravel with Inertia and React.

Use Create

Design your setup in a live studio. Laravel is configured in place after you create the Inertia + React app.

Create the app first, then configure Default File UI in place.

01
Create a Laravel + Inertia React app
The CLI does not scaffold PHP apps. Create Laravel first, then configure in place.
Create a Laravel + Inertia React app
laravel new example-app
cd example-app
php artisan inertia:install react
02
Configure with the CLI
Configure with the CLI (npm)
npx --yes -p @default-file/ui df-ui init --framework laravel
03
Add a component
Copy the Button source into your app and import from `@/default-file-ui/components/df-button`. Those files become yours. Later kit releases do not replace them unless you run `df-ui add button --force`. To use the package instead, skip this step and import from `@default-file/ui`.
Add a component (npm)
npx --yes -p @default-file/ui df-ui add button

1
2
3
4
5
import { Button } from "@default-file/ui/components/df-button"
 
export default function Welcome() {
  return <Button>Click me</Button>
}

Configure with the CLI in your app folder, or follow the manual steps.

01
Create a Laravel app with React
Default File UI is React. Use Inertia's React starter (or an equivalent React front end). Skip if you already have one.
Create a Laravel app with React
laravel new example-app
cd example-app
php artisan inertia:install react
02
Configure with the CLI
Configure with the CLI (npm)
npx --yes -p @default-file/ui df-ui init --framework laravel
03
Or install manually
Or install manually (npm)
npm install @default-file/ui react react-dom lucide-react
04
Import the stylesheet
Import once in your Vite entry CSS (commonly `resources/css/app.css`). Keep this import first in the file. Starter templates often declare their own `--background`, `--foreground`, or `--border` under `:root`. Those names are kit semantic tokens, so remove or rename them to keep kit theming and dark mode intact.
Import the stylesheet
@import "@default-file/ui/css/df-index.css";
05
Add a component
Copy the Button source into your app and import from `@/default-file-ui/components/df-button`. Those files become yours. Later kit releases do not replace them unless you run `df-ui add button --force`. To use the package instead, skip this step and import from `@default-file/ui`.
Add a component (npm)
npx --yes -p @default-file/ui df-ui add button

1
2
3
4
5
import { Button } from "@default-file/ui/components/df-button"
 
export default function Welcome() {
  return <Button>Click me</Button>
}

Blade or Livewire-only apps are not supported. The kit requires a React runtime.

Using a different stack? Choose another framework.