skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

blatui-laravel-blade-components

Installs shadcn/ui-style Blade components into Laravel projects via a CLI.

4|Updated May 16, 2026
Search Tags:#cli#tailwind css#laravel#ui components#ShadCN#blade#Alpine.js
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill blatui-laravel-blade-components-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blatui-laravel-blade-components
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/blatui-laravel-blade-components
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill blatui-laravel-blade-components-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Laravel developers lack a shadcn/ui-equivalent component workflow for Blade, forcing them to hand-build accessible, themeable UI components with Tailwind and Alpine from scratch. ## Core Features & Use Cases - Component Scaffolding CLI: Copy 156+ accessible Blade components (WCAG AA) directly into your project with php artisan blatui:add, owning and editing the code freely. - Design Token Theming: Customize oklch CSS variables in blatui.css with built-in light/dark mode support on Tailwind CSS v4. - Blocks and Charts: Copy pre-built dashboards, auth pages, and 70+ ApexCharts chart types from the demo site. - Use Case: A developer building a Laravel admin panel runs php artisan blatui:add card table button badge to scaffold a styled data table UI in minutes instead of writing components manually. ## Quick Start Ask the agent to set up BlatUI in your Laravel project and add the button, card, and input components.

Frequently Asked Questions about blatui-laravel-blade-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn-style components to a Laravel app?▼

Install the BlatUI package with composer, publish its foundations, then run php artisan blatui:add followed by component names like button, card, or input. Components are copied to resources/views/components/ui/ and used as x-ui.* Blade components.

What is the BLAT stack for Laravel UI development?▼

BLAT stands for Blade, Laravel, Alpine, and Tailwind. BlatUI ports shadcn/ui's design language to this stack, providing accessible components styled with Tailwind CSS v4 and interactive behavior powered by Alpine.js.

Does BlatUI work with Tailwind CSS v3?▼

No, BlatUI requires Tailwind CSS v4. If your project uses v3, migrate first by running npx @tailwindcss/upgrade, then verify the setup with php artisan blatui:init.

Can I use BlatUI in a project that already uses Alpine.js?▼

Yes, but do not import blatui.js since it boots a second Alpine instance. Instead import blatui-core.js and call registerBlatUI(Alpine) on your existing Alpine instance before calling Alpine.start().

Why are BlatUI charts not rendering in my Laravel app?▼

Charts require the apexcharts npm package, which is not installed by default. Run npm install -D apexcharts and ensure resources/js/blatui.js is imported, since the chart engine is lazy-loaded from that file.

How do I enable dark mode with BlatUI components?▼

BlatUI uses class-based dark mode. Add the dark class to your html element, or toggle it dynamically with Alpine by binding the class to a boolean state variable stored in localStorage.

Related Skills

Explore More Software Engineering Skills→
anilcancakiranilcancakir
5

laravel-fullstack

Integrate Laravel Blade views with Alpine.js, Vue.js, TailwindCSS, and Vite.

Community
Intermediate
HieubkavHieubkav

laravel

Generate Laravel 12.x applications and APIs with Eloquent ORM patterns.

Community
Intermediate
zero3041zero3041
1

laravel-tdd

Implement test-driven development for Laravel using PHPUnit and Pest.

Community
Intermediate
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic