{
"markdown": "\n\n# BlatUI\n\n### shadcn/ui for the **BLAT** stack — **B**lade · **L**aravel · **A**lpine · **T**ailwind\n\nA CLI that copies open-source, copy-paste UI components **you own** straight into your Laravel project.\n\n[](https://packagist.org/packages/anousss007/blatui)\n[](https://github.com/anousss007/blatui/actions/workflows/ci.yml)\n[](LICENSE)\n[](https://blatui.remix-it.com)\n\n**155 components · 614 variants · 64 blocks · 70 charts · accessible (WCAG AA) · Livewire-ready · fully themeable · light + dark · MIT**\n\n[Live demo & docs → blatui.remix-it.com](https://blatui.remix-it.com)\n\n
\n\n> 🧩 **This is the BlatUI monorepo.** The Composer package is the repo **root** (`src/` + `stubs/`)\n> — Packagist reads it directly, so `composer require anousss007/blatui` is unchanged and the\n> `apps/` are stripped from the dist tarball. Components are **authored in `apps/demo/`** and\n> generated into `stubs/`. See [Contributing](#contributing) before editing a component.\n\n---\n\n## Why BlatUI\n\n- **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.\n- **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.\n- **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.\n- **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)\n- **Faithful to shadcn/ui.** Same design language, component APIs and blocks — ported to the Laravel way.\n- **Themeable to the core.** Every token is a CSS variable.\n\n## Requirements\n\n- PHP 8.2+ · Laravel 11, 12 or 13\n- Tailwind CSS v4 · Alpine.js 3 · Node 18+\n\n## Installation\n\n```bash\n# 1. Install the CLI\ncomposer require anousss007/blatui\n\n# 2. Peer packages used by the components\ncomposer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons\nnpm install -D alpinejs @alpinejs/anchor @floating-ui/dom @alpinejs/collapse @alpinejs/focus\n\n# 3. Publish the foundations (theme tokens + Alpine/chart/calendar engine)\nphp artisan vendor:publish --tag=blatui-foundations\n# → resources/css/blatui.css (oklch design tokens, presets, light/dark)\n# → resources/js/blatui.js (greenfield bootstrap — boots Alpine for you)\n# → resources/js/blatui-core.js (engine: registerBlatUI, for apps already running Alpine)\n\n# 4. Verify your setup\nphp artisan blatui:init\n```\n\nPoint your two Vite entrypoints at the published foundations — **replace** each file's contents:\n\n```css\n/* resources/css/app.css */\n@import \"./blatui.css\";\n```\n```js\n// resources/js/app.js\nimport \"./blatui.js\";\n```\n\n> `blatui.css` brings Tailwind, the design tokens and the `@theme`\n> mapping; `blatui.js` boots Alpine + its plugins and lazy-loads ApexCharts. Run\n> `blatui:init` to confirm everything (packages, tokens, imports) is wired up.\n\n> The foundations are published once and become *yours* — tweak the tokens, drop\n> the chart engine if you don't need charts, etc. `blatui:init` will tell you\n> what's still missing.\n\n### Installing into an existing project\n\nEverything is **additive** — you don't replace your files.\n\n- **Tailwind v4 is required.** BlatUI uses v4-only features (`@theme inline`, oklch). On\n Tailwind v3, migrate first with `npx @tailwindcss/upgrade`; `blatui:init` detects the version.\n- **CSS:** add `@import \"./blatui.css\";` to your existing `app.css`, below `@import \"tailwindcss\";`.\n- **JS — already running Alpine?** Don't import `blatui.js` (it would boot a second Alpine).\n Register BlatUI into your own instance instead, before you start it:\n\n```js\nimport Alpine from 'alpinejs'\nimport { registerBlatUI } from './blatui-core.js'\n\nregisterBlatUI(Alpine) // plugins + theme store + chart/calendar engines\nwindow.Alpine = Alpine\nAlpine.start()\n```\n\n- **JS — using Livewire or Flux?** Livewire bundles and starts Alpine for you, so don't\n `npm install alpinejs` (that's the duplicate-Alpine trap) and don't import `blatui.js`.\n Install only the plugins — `npm install -D @alpinejs/anchor @floating-ui/dom @alpinejs/collapse @alpinejs/focus`\n (add `apexcharts` only if you use charts) — and register BlatUI onto Livewire's Alpine via\n the `alpine:init` hook:\n\n```js\nimport { registerBlatUI } from './blatui-core.js'\n\ndocument.addEventListener('alpine:init', () => {\n registerBlatUI(window.Alpine)\n})\n```\n\n BlatUI registers a `theme` store for dark mode. If Flux already drives dark mode, pass\n `registerBlatUI(window.Alpine, { darkMode: false })` so the two don't both toggle `.dark`.\n\n## Adding components\n\n```bash\n# Add one or more — dependencies are resolved automatically\nphp artisan blatui:add button card input\n\n# See everything you can add — components, blocks & charts\nphp artisan blatui:list\n\n# Details for a single component\nphp artisan blatui:list select\n\n# Everything at once\nphp artisan blatui:add --all\n```\n\nComponents land in `resources/views/components/ui/` as Blade tags:\n\n```blade\n\n \n Welcome back\n Sign in to continue.\n \n \n \n Sign in\n \n\n```\n\n`blatui:add` prints any extra `composer`/`npm` packages a component needs\n(e.g. charts pull in `apexcharts`).\n\n## Keeping components up to date\n\nYou own the copied files, so an upgrade is never automatic — `blatui:update`\nshows you what changed and lets you decide, file by file:\n\n```bash\n# What would change across everything you have installed?\nphp artisan blatui:update --dry-run --diff\n\n# Update, confirming each file that differs from the version we ship\nphp artisan blatui:update\n\n# Just these families, no questions asked (your version is kept as .bak)\nphp artisan blatui:update button card --force\n```\n\nA file that differs is either your customisation or an outdated copy — nothing on\ndisk tells the two apart, so BlatUI never overwrites one without showing the diff\nand asking. `--force` still writes a `.bak` next to each file it replaces (opt out\nwith `--no-backup`). Files a family gained in a newer release are simply added.\n\nRunning Pint or Prettier over `resources/views`? Your formatter rewrites the\nlayout of every component you copied, and all of them then read as changed. They\nare counted separately as *same content, reformatted*, and `--ignore-whitespace`\nleaves them out:\n\n```bash\nphp artisan blatui:update --dry-run --ignore-whitespace\n```\n\nThe CSS/JS foundations are published, not copied — re-sync those with\n`vendor:publish --tag=blatui-foundations --force`; `blatui:init` tells you when\nthe engine has fallen behind.\n\n## Blocks & charts\n\nBlocks (dashboards, sidebars, login pages…) and the 70 charts are **copy-paste\nfrom the demo site** — they're full-page compositions, not primitives, so you\ngrab the exact source you want rather than installing it:\n\n👉 **[Browse blocks & charts on the live demo](https://blatui.remix-it.com/blocks)**\n\n## Commands\n\n| Command | Description |\n|---|---|\n| `blatui:init` | Doctor — checks packages, Tailwind v4, theme tokens, Alpine/engine wiring |\n| `blatui:list [component]` | List all component families, or detail one |\n| `blatui:add ` | Copy components (+ deps) into your project |\n| `blatui:update [components...]` | Diff installed components against this version and update them (`--dry-run`, `--diff`, `--force`, `--ignore-whitespace`) |\n| `blatui:doctor [path]` | Scan your Blade for known footguns (typeless buttons in forms, leaked tags) |\n| `blatui:mcp` | Run the MCP server (stdio) so an AI editor can search and install components |\n| `vendor:publish --tag=blatui-foundations` | Publish theme CSS + JS engine |\n\n## Contributing\n\nBlatUI is a **monorepo** — one repo, one PR, one CI. The Composer package is the repo root;\nthe demo/docs site and starter kit are apps that live alongside it (excluded from the published\npackage via `.gitattributes`).\n\n```\ncomposer.json src/ stubs/ → the published package (this is what `composer require` gets)\napps/demo/ → authors AND renders every component; the live docs site\napps/starter/ → the Laravel starter kit\nscripts/build-package.sh → regenerates stubs/ from apps/demo (CI enforces it)\n```\n\nComponents are **authored in `apps/demo/resources/views/components/ui/`** (the only place they\nrender, so it's the source of truth); `stubs/` is generated — don't hand-edit it. After changing\na component, run `bash scripts/build-package.sh` and commit both. CI fails if they drift.\nFull guide: [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Credits\n\nBlatUI is a port of [**shadcn/ui**](https://ui.shadcn.com) to the Laravel/Blade\necosystem. Thanks to [shadcn](https://twitter.com/shadcn) and contributors.\nIcons by [Lucide](https://lucide.dev). Charts by [ApexCharts](https://apexcharts.com).\n\n## License\n\n[MIT](./LICENSE) — free for personal and commercial use.\n",
"bytes": 9906,
"sha": "e979d3e61e42010a24ce4116d5c40eda6983d6f9498fe5d3166e607ea2dd1afc",
"repo_slug": "anousss007/blatui",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/mcp_io_github_anousss007_blatui_18b9a9bb/readme"
}