Why BlatUI

• Accessible by default. WAI-ARIA roles, complete keyboard navigation & focus management, and WCAG AA color contrast — modeled on shadcn/ui's Base UI behavior, verified in a real browser and audited with axe-core. Accessibility isn't an add-on; it ships in every component.
• You own the code. Components are copied into your project — not hidden in vendor/. Edit them however you like; updating the package never overwrites your edits.
• The BLAT stack. Pure Blade components, a sprinkle of Alpine.js for interactivity, Tailwind CSS v4 for styling. No React, no build-step lock-in.
• Faithful to shadcn/ui. Same design language, component APIs and blocks — ported to the Laravel way.
• Themeable to the core. Every token is a CSS variable.

Requirements

• PHP 8.2+ · Laravel 11, 12 or 13
• Tailwind CSS v4 · Alpine.js 3 · Node 18+

Installation

# 1. Install the CLI
composer require blatui/blatui

# 2. Peer packages used by the components
composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons
npm install -D alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus

# 3. Publish the foundations (theme tokens + Alpine/chart/calendar engine)
php artisan vendor:publish --tag=blatui-foundations
#   → resources/css/blatui.css      (oklch design tokens, presets, light/dark)
#   → resources/js/blatui.js        (greenfield bootstrap — boots Alpine for you)
#   → resources/js/blatui-core.js   (engine: registerBlatUI, for apps already running Alpine)

# 4. Verify your setup
php artisan blatui:init

Point your two Vite entrypoints at the published foundations — replace each file's contents:

/* resources/css/app.css */
@import "./blatui.css";

// resources/js/app.js
import "./blatui.js";

blatui.css brings Tailwind, the design tokens and the @theme mapping; blatui.js boots Alpine + its plugins and lazy-loads ApexCharts. Run blatui:init to confirm everything (packages, tokens, imports) is wired up.

The foundations are published once and become yours — tweak the tokens, drop the chart engine if you don't need charts, etc. blatui:init will tell you what's still missing.

Installing into an existing project

Everything is additive — you don't replace your files.

• Tailwind v4 is required. BlatUI uses v4-only features (@theme inline, oklch). On Tailwind v3, migrate first with npx @tailwindcss/upgrade; blatui:init detects the version.
• CSS: add @import "./blatui.css"; to your existing app.css, below @import "tailwindcss";.
• JS — already running Alpine? Don't import blatui.js (it would boot a second Alpine). Register BlatUI into your own instance instead, before you start it:

import Alpine from 'alpinejs'
import { registerBlatUI } from './blatui-core.js'

registerBlatUI(Alpine)   // plugins + theme store + chart/calendar engines
window.Alpine = Alpine
Alpine.start()

Adding components

# Add one or more — dependencies are resolved automatically
php artisan blatui:add button card input

# See everything avai

... [View full README on GitHub](https://github.com/anousss007/blatui#readme)