Add BlatUI to any Laravel app in a few minutes. You install the foundations once, then pull in components on demand — and you own every line.
Run these three and start building.
composer require blatui/blatui
php artisan blatui:init
php artisan blatui:add button card dialogPull BlatUI in via Composer. It ships the Artisan commands and the component registry.
composer require blatui/blatuiTwo Composer packages power the components — twMerge() (the cn() equivalent) and Lucide icons:
composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-iconsThen the front-end packages — Alpine, its plugins, and ApexCharts (for the charts):
npm install -D alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus apexchartsDrop the shadcn design tokens into resources/css/app.css. This is the heart of the theming system — every component reads these CSS variables.
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--muted: oklch(0.97 0 0);
--border: oklch(0.922 0 0);
/* …card, popover, secondary, accent, destructive, ring, chart-1…5, sidebar… */
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
/* …dark overrides… */
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--radius-lg: var(--radius);
/* …map every token… */
}:root / .dark block.
Register Alpine and its plugins in resources/js/app.js. The plugins drive popovers, accordions and focus traps.
import Alpine from 'alpinejs'
import anchor from '@alpinejs/anchor'
import collapse from '@alpinejs/collapse'
import focus from '@alpinejs/focus'
Alpine.plugin(anchor)
Alpine.plugin(collapse)
Alpine.plugin(focus)
window.Alpine = Alpine
Alpine.start()Run the doctor. It checks every foundation — packages, theme tokens, Alpine bootstrap — and tells you exactly what's missing.
php artisan blatui:initCopy components — and their dependencies — straight into resources/views/components/ui. They're yours now: edit freely.
php artisan blatui:add button card dialog
# browse everything that's available
php artisan blatui:listEvery component is a Blade tag under the ui namespace. Compose away:
<x-ui.card class="max-w-sm">
<x-ui.card-header>
<x-ui.card-title>Welcome back</x-ui.card-title>
<x-ui.card-description>Sign in to continue.</x-ui.card-description>
</x-ui.card-header>
<x-ui.card-content class="space-y-3">
<x-ui.input type="email" placeholder="[email protected]" />
<x-ui.button class="w-full">Sign in</x-ui.button>
</x-ui.card-content>
</x-ui.card>Renders