# Blatui Laravel Blade Components > CLI that installs shadcn/ui-style Blade components for the BLAT stack (Blade, Laravel, Alpine, Tailwind) into your Laravel project - Skill: `aradotso/blatui-laravel-blade-components` (Agent Skill) - Install (CLI): `npx skillmds@latest add aradotso/blatui-laravel-blade-components` - Raw SKILL.md: https://api.skillmd.com/api/skills/aradotso/blatui-laravel-blade-components/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: aradotso (https://skillmd.com/u/aradotso) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/aradotso/blatui-laravel-blade-components --- # BlatUI Laravel Blade Components > Skill by [ara.so](https://ara.so) — Devtools Skills collection. BlatUI is a CLI for Laravel that brings shadcn/ui's component philosophy to the **BLAT stack** (Blade · Laravel · Alpine · Tailwind). It copies accessible, themeable UI components directly into your project — you own the code and can customize it freely. Components are built with Blade, styled with Tailwind CSS v4, and use Alpine.js for interactivity. **Key Features:** - 156+ accessible components (WCAG AA compliant) - Components are copied, not installed — you own and edit them - Full design token system with light/dark mode - Faithful port of shadcn/ui's design language - 70 chart types, 64 pre-built blocks ## Requirements - PHP 8.2+ - Laravel 11, 12, or 13 - Tailwind CSS v4 (required) - Alpine.js 3 - Node 18+ ## Installation ### New Project Setup ```bash # 1. Install the CLI package composer require anousss007/blatui # 2. Install peer dependencies composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons npm install -D alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus # 3. Publish foundations (theme tokens, Alpine engine, CSS) php artisan vendor:publish --tag=blatui-foundations # 4. Verify setup php artisan blatui:init ``` **Update your Vite entrypoints** (replace contents): ```css /* resources/css/app.css */ @import "./blatui.css"; ``` ```js // resources/js/app.js import "./blatui.js"; ``` The published `blatui.css` includes Tailwind v4, oklch design tokens, and theme presets. The `blatui.js` file bootstraps Alpine with required plugins. ### Existing Project Setup BlatUI is fully additive. Key considerations: **Tailwind v4 Migration:** ```bash # Check your version php artisan blatui:init # Migrate from v3 to v4 if needed npx @tailwindcss/upgrade ``` **CSS Integration:** ```css /* resources/css/app.css */ @import "tailwindcss"; @import "./blatui.css"; /* Add below Tailwind import */ ``` **Alpine.js Integration (if already using Alpine):** Don't import `blatui.js` — it would create a second Alpine instance. Use `blatui-core.js` instead: ```js // resources/js/app.js import Alpine from 'alpinejs' import { registerBlatUI } from './blatui-core.js' registerBlatUI(Alpine) // Registers plugins, theme store, chart/calendar engines window.Alpine = Alpine Alpine.start() ``` ## CLI Commands ### Initialize and Verify ```bash # Check setup: packages, Tailwind v4, tokens, Alpine wiring php artisan blatui:init ``` This command validates your entire setup and provides actionable fixes if something is missing. ### List Components ```bash # List all available components, blocks, and charts php artisan blatui:list # Get details about a specific component php artisan blatui:list select php artisan blatui:list dialog php artisan blatui:list button ``` ### Add Components ```bash # Add one component php artisan blatui:add button # Add multiple components (dependencies resolved automatically) php artisan blatui:add button card input select # Install all components at once php artisan blatui:add --all ``` Components are copied to `resources/views/components/ui/`. The CLI will notify you of any additional npm/composer packages needed (e.g., charts require `apexcharts`). ## Component Usage Components are used as Blade anonymous components under the `x-ui.*` namespace. ### Basic Card Example ```blade Account Settings Manage your account preferences

Card content goes here

 Save Changes ``` ### Button Variants ```blade {{-- Default --}} Click Me {{-- Variants --}} Delete Cancel Secondary Ghost Link Style {{-- Sizes --}} Small Large {{-- With icons --}} Send Email ``` ### Form Components ```blade
@csrf {{-- Input --}}
Email @error('email')

{{ $message }}

@enderror
{{-- Textarea --}}
Bio {{ old('bio', $user->bio) }}
{{-- Select --}}
Role
{{-- Checkbox --}}
I agree to the terms and conditions
Save Changes
``` ### Dialog Component ```blade {{-- Dialog trigger and content --}}
Open Dialog Confirm Action Are you sure you want to proceed? Cancel Confirm
``` ### Table Component ```blade Name Email Role Actions @foreach($users as $user) {{ $user->name }} {{ $user->email }} {{ $user->role }} Edit @endforeach ``` ### Alert Component ```blade {{-- Default alert --}} Information Your session will expire in 5 minutes. {{-- Destructive variant --}} Error Failed to save changes. Please try again. ``` ### Badge Component ```blade Default Secondary Destructive Outline {{-- With icons --}} Verified ``` ## Theming and Customization ### CSS Variables All design tokens live in `resources/css/blatui.css` as CSS custom properties (oklch color space): ```css @theme inline { --color-background: oklch(100% 0 0); --color-foreground: oklch(9% 0 0); --color-primary: oklch(47% 0.2 264); --color-primary-foreground: oklch(98% 0 0); /* ... more tokens */ } .dark { --color-background: oklch(9% 0 0); --color-foreground: oklch(98% 0 0); /* ... dark mode overrides */ } ``` **To customize your theme:** 1. Edit `resources/css/blatui.css` 2. Change the oklch values for any token 3. Changes apply to all components instantly ### Dark Mode BlatUI uses class-based dark mode. Add the `dark` class to your root element: ```blade {{-- In your layout --}} {{-- Dark mode active --}} {{-- Toggle with Alpine --}}
Toggle Dark Mode
``` ### Component Customization Since components are copied to your project, you can edit them directly: ```bash # Components live here — edit freely ls resources/views/components/ui/ ``` Example: customize the button component: ```blade {{-- resources/views/components/ui/button.blade.php --}} @props([ 'variant' => 'default', 'size' => 'default', 'type' => 'button', ]) @php $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge([ 'inline-flex items-center justify-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50', // Add your custom variant match($variant) { 'brand' => 'bg-purple-600 text-white hover:bg-purple-700', default => '...', }, $attributes->get('class'), ]); @endphp ``` ## Blocks and Charts Blocks (dashboards, sidebars, auth pages) and charts are **copy-paste from the demo site**, not installed via CLI. Browse them at the live demo and copy the exact Blade code you need. **Live Demo:** https://blatui.remix-it.com/blocks Common blocks: - Authentication layouts - Dashboard shells - Sidebar navigation - Data tables with filters - 70+ chart types (bar, line, pie, area, radar, etc.) Charts require `apexcharts`: ```bash npm install -D apexcharts ``` ## Common Patterns ### Full Login Page ```blade
Welcome back Enter your credentials to sign in
@csrf
Email
Password
Remember me
Forgot password?
Sign in

Don't have an account? Sign up

``` ### Data Table with Actions ```blade
Add User
Name Status Role Actions @foreach($users as $user) {{ $user->name }} {{ $user->active ? 'Active' : 'Inactive' }} {{ $user->role }} @endforeach {{ $users->links() }}
``` ### Toast Notifications ```blade {{-- In your layout, add the toast container --}}
{{-- Trigger from Alpine --}} Save {{-- Trigger from Livewire --}} $this->dispatch('toast', message: 'User created', variant: 'success'); ``` ## Troubleshooting ### `blatui:init` reports missing packages ```bash # Install missing dependencies composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons npm install -D alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus ``` ### Tailwind v3 detected BlatUI requires Tailwind CSS v4. Migrate first: ```bash npx @tailwindcss/upgrade ``` ### Components not styled correctly Ensure `blatui.css` is imported in your CSS: ```css /* resources/css/app.css */ @import "./blatui.css"; ``` And that Vite is processing it: ```js // vite.config.js export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ], }); ``` ### Alpine not working Verify Alpine is loaded. If you see "Alpine is not defined": ```js // resources/js/app.js import "./blatui.js"; // Boots Alpine for you ``` Or if already using Alpine: ```js import Alpine from 'alpinejs' import { registerBlatUI } from './blatui-core.js' registerBlatUI(Alpine) window.Alpine = Alpine Alpine.start() ``` ### Charts not rendering Charts need `apexcharts`: ```bash npm install -D apexcharts ``` The chart engine is lazy-loaded from `resources/js/blatui.js` — ensure it's imported. ### Dark mode not working Add the `dark` class to your `` or root element: ```blade ``` Or toggle dynamically with Alpine: ```blade
{{-- Your app --}}
``` ### Component dependencies not installed When you add a component, the CLI tells you if it needs extra packages: ```bash php artisan blatui:add calendar # Output: Install required package: npm install -D @fullcalendar/core ``` Follow the instructions and re-run your build. ## Resources - **Documentation & Demo:** https://blatui.remix-it.com - **GitHub:** https://github.com/anousss007/blatui - **Packagist:** https://packagist.org/packages/anousss007/blatui