BlatUI

The Shift to Blade-First UI Components Modern Laravel developers often feel forced into heavy JavaScript frameworks like React or Vue just to get polished, accessible UI libraries like Shadcn UI. BlatUI flips this expectation. It delivers over 100 components built on the "TALL" stack principles but swaps out Livewire for vanilla Blade and AlpineJS, styled with Tailwind CSS. This architecture keeps your application light and highly performant. The components are published directly into your local directory rather than hiding in vendor files, giving you absolute control over styling and behavior. Prerequisites & Project Setup Before installing BlatUI, ensure your development environment runs a standard Laravel installation configured with Tailwind CSS 4. Run the following commands in your terminal to pull in the initial dependencies and components: ```bash composer require blatui/blatui php artisan blatui:install ``` Next, append the required assets to your `resources/css/app.css` and `resources/js/app.js` files to initialize AlpineJS bindings and Tailwind CSS styles: ```javascript // resources/js/app.js import './blatui'; ``` Component Walkthrough & Syntax Once installed, you can generate specific components, such as a button or a card. These live directly in your `resources/views/components` folder as clean, editable Blade files. ```bash php artisan blatui:add button card input ``` To render these components, use the expressive `x-ui` prefix. Here is how a custom login card with form inputs looks under the hood: ```html <x-ui-card class="w-full max-w-md"> <x-ui-card-header> <x-ui-card-title>Welcome back</x-ui-card-title> <x-ui-card-description>Enter your details below</x-ui-card-description> </x-ui-card-header> <x-ui-card-content> <x-ui-field-group> <x-ui-label for="email">Email</x-ui-label> <x-ui-input id="email" type="email" placeholder="[email protected]" /> </x-ui-field-group> <x-ui-button class="w-full mt-4">Sign In</x-ui-button> </x-ui-card-content> </x-ui-card> ``` Automating Builds with Claude Code and MCP One of the most powerful aspects of BlatUI is its built-in Model Context Protocol (MCP) server. You can register the server globally using Node: ```bash npx -y @blatui/mcp-server ``` By connecting this server to Claude Code, the AI assistant gains deep awareness of the entire component registry. When you prompt the agent to rebuild a layout, it automatically calls the MCP server, determines which BlatUI components fit the description, runs the terminal commands to install them, and writes the correct markup into your project. Tips, Gotchas, and Asset Compilation Be mindful of visual compilation errors after letting an AI generate your views. Because BlatUI depends heavily on Tailwind CSS utility classes, some auto-generated layouts can output poor color choices, like dark text on dark backgrounds. Always force an asset rebuild after significant component changes: ```bash npm run build ```