PHPackages                             blatui/blatui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [CLI & Console](/categories/cli)
4. /
5. blatui/blatui

Abandoned → [anousss007/blatui](/?search=anousss007%2Fblatui)Library[CLI & Console](/categories/cli)

blatui/blatui
=============

Open-source shadcn/ui for the BLAT stack (Blade, Laravel, Alpine.js, Tailwind CSS v4). A CLI that copies components you own into your Laravel project.

v1.16.0(3w ago)19928881MITBladePHP ^8.2CI passing

Since May 29Pushed 2w ago6 watchersCompare

[ Source](https://github.com/anousss007/blatui)[ Packagist](https://packagist.org/packages/blatui/blatui)[ Docs](https://github.com/anousss007/blatui)[ RSS](/packages/blatui-blatui/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (10)Dependencies (8)Versions (36)Used By (1)

BlatUI
======

[](#blatui)

### shadcn/ui for the **BLAT** stack — **B**lade · **L**aravel · **A**lpine · **T**ailwind

[](#shadcnui-for-the-blat-stack--blade--laravel--alpine--tailwind)

A CLI that copies open-source, copy-paste UI components **you own** straight into your Laravel project.

[![Latest Version](https://camo.githubusercontent.com/a45e3f7d222144ab83ba7f1df16580c2c5df7403d4ffdf1e80613b815acc76b9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616e6f757373733030372f626c617475692e737667)](https://packagist.org/packages/anousss007/blatui)[![CI](https://github.com/anousss007/blatui/actions/workflows/ci.yml/badge.svg)](https://github.com/anousss007/blatui/actions/workflows/ci.yml)[![License](https://camo.githubusercontent.com/d1400d449784666be0066255a68a23f243483ee3752f08636d073efb1255fd30/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f616e6f757373733030372f626c617475692e737667)](LICENSE)[![Accessibility: WCAG AA](https://camo.githubusercontent.com/dbe4cca9a09614dc2f0c83183db1c5bd3b599db1274d79fd9a6adbdec4c6006b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6163636573736962696c6974792d5743414725323041412d3232633535652e737667)](https://blatui.remix-it.com)

**155 components · 614 variants · 64 blocks · 70 charts · accessible (WCAG AA) · Livewire-ready · fully themeable · light + dark · MIT**

[Live demo & docs → blatui.remix-it.com](https://blatui.remix-it.com)

---

Why BlatUI
----------

[](#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.
- **Livewire-ready.** `wire:model` works on every form control — inputs, selects, checkboxes, switches, sliders, date/time pickers, file uploads and more — with full two-way binding. A free, you-own-the-code alternative to Flux Pro. [See the Livewire guide →](https://blatui.remix-it.com/docs/livewire)
- **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
------------

[](#requirements)

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

Installation
------------

[](#installation)

```
# 1. Install the CLI
composer require anousss007/blatui

# 2. Peer packages used by the components
composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons
npm install -D alpinejs @alpinejs/anchor @floating-ui/dom @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

[](#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()
```

- **JS — using Livewire or Flux?** Livewire bundles and starts Alpine for you, so don't `npm install alpinejs` (that's the duplicate-Alpine trap) and don't import `blatui.js`. Install only the plugins — `npm install -D @alpinejs/anchor @floating-ui/dom @alpinejs/collapse @alpinejs/focus`(add `apexcharts` only if you use charts) — and register BlatUI onto Livewire's Alpine via the `alpine:init` hook:

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

document.addEventListener('alpine:init', () => {
    registerBlatUI(window.Alpine)
})
```

BlatUI registers a `theme` store for dark mode. If Flux already drives dark mode, pass `registerBlatUI(window.Alpine, { darkMode: false })` so the two don't both toggle `.dark`.

Adding components
-----------------

[](#adding-components)

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

# See everything you can add — components, blocks & charts
php artisan blatui:list

# Details for a single component
php artisan blatui:list select

# Everything at once
php artisan blatui:add --all
```

Components land in `resources/views/components/ui/` as Blade tags:

```

        Welcome back
        Sign in to continue.

        Sign in

```

`blatui:add` prints any extra `composer`/`npm` packages a component needs (e.g. charts pull in `apexcharts`).

Blocks & charts
-------------------

[](#blocks--charts)

Blocks (dashboards, sidebars, login pages…) and the 70 charts are **copy-paste from the demo site** — they're full-page compositions, not primitives, so you grab the exact source you want rather than installing it:

👉 **[Browse blocks & charts on the live demo](https://blatui.remix-it.com/blocks)**

Commands
--------

[](#commands)

CommandDescription`blatui:init`Doctor — checks packages, Tailwind v4, theme tokens, Alpine/engine wiring`blatui:list [component]`List all component families, or detail one`blatui:add `Copy components (+ deps) into your project`vendor:publish --tag=blatui-foundations`Publish theme CSS + JS engineCredits
-------

[](#credits)

BlatUI is a port of [**shadcn/ui**](https://ui.shadcn.com) to the Laravel/Blade ecosystem. Thanks to [shadcn](https://twitter.com/shadcn) and contributors. Icons by [Lucide](https://lucide.dev). Charts by [ApexCharts](https://apexcharts.com).

License
-------

[](#license)

[MIT](./LICENSE) — free for personal and commercial use.

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance96

Actively maintained with recent releases

Popularity34

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

34

Last Release

21d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/4137453?v=4)[Anas B.](/maintainers/anousss007)[@anousss007](https://github.com/anousss007)

---

Top Contributors

[![anousss007](https://avatars.githubusercontent.com/u/4137453?v=4)](https://github.com/anousss007 "anousss007 (65 commits)")

---

Tags

clilaraveluicomponentsbladeshadcntailwindcssalpinejsblatui

###  Code Quality

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/blatui-blatui/health.svg)

```
[![Health](https://phpackages.com/badges/blatui-blatui/health.svg)](https://phpackages.com/packages/blatui-blatui)
```

###  Alternatives

[anousss007/blatui

Open-source shadcn/ui for the BLAT stack (Blade, Laravel, Alpine.js, Tailwind CSS v4). A CLI that copies components you own into your Laravel project.

1811.3k2](/packages/anousss007-blatui)[livewire/flux

The official UI component library for Livewire.

9577.8M138](/packages/livewire-flux)[laravel/ai

The official AI SDK for Laravel.

1.0k3.2M246](/packages/laravel-ai)[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k570.6k23](/packages/robsontenorio-mary)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)