BlatUI brings Shadcn style components directly to Laravel Blade

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:

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:

// 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.

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:

<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:

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:

npm run build