ng-blatui
  
Accessible Angular UI library — a faithful port of BlatUI's visual system to Angular. Built on the official Angular headless stack (Angular Aria + CDK), styled with Tailwind CSS v4 + oklch design tokens.
155 components · 16 blocks · 70 charts · 34 page templates — all standalone, signal-based, zoneless and SSR-safe.
🔗 Docs & live demo → · 📦 npm · 🤖 Using with AI →
---
Highlights
- Angular 21 & 22 — standalone components, signals (
input()/model()/output()), zoneless change detection,OnPushby default. - SSR-ready — every component renders correctly under server-side rendering (the docs site prerenders 280+ static routes).
- Accessible — behavior built on
@angular/aria+@angular/cdk; passes AXE / WCAG AA. - Forms-native — every form control implements
ControlValueAccessor, so the same component works with Reactive, Template-driven and Signal forms. - Themeable — Tailwind v4 utilities + CSS variables (oklch tokens); light/dark out of the box.
- AI-ready — ships an MCP server, an
llms.txtindex and a machine-readable registry (see below).
Installation
npm i ng-blatuiPeer dependencies (Angular 21 or 22): @angular/core, @angular/common, @angular/forms, @angular/cdk, @angular/aria.
Tailwind CSS setup
Styling is Tailwind CSS v4. In your app's global stylesheet (e.g. src/styles.css) add three lines:
@import 'tailwindcss';
@import 'ng-blatui/foundations/blatui.css'; /* design tokens + dark theme */
@source '../node_modules/ng-blatui'; /* ← generate the utilities the lib's classes use */The @source line is the easy one to miss: without it Tailwind never scans ng-blatui's compiled templates, so the components render unstyled. Point it at wherever ng-blatui lives relative to the stylesheet (adjust the ../ depth). Dark mode is a dark class on a parent (<html class="dark">); override any oklch token in :root / .dark to re-theme. Full guide: https://ngblatui.remix-it.com/docs/installation.
Icons
ng-blatui ships no icon set — wire your own (e.g. @ng-icons) with provideIcons(...) and register each icon you use. Components that take an icon accept an SVG path d string, so any icon source works.
Usage
Import the component class from the ng-blatui barrel and add it to a standalone component's imports[] — no NgModule. Selectors are prefixed bui.
import { Component } from '@angular/core';
import { BuiButton, BuiBadge, BuiInput } from 'ng-blatui';
@Component({
selector: 'app-demo',
imports: [BuiButton, BuiBadge, BuiInput],
template: `
<label>
Email
<input buiInput type="email" placeholder="you@example.com" />
</label>
<button buiButton>Save <span buiBadge tone="success">New</span></button>
`,
})
export class Demo {}- Element selectors:
<bui-avatar>,<bui-rating>, … - Attribute/directive selectors:
<button buiButton>,<input buiInput>,<span buiBadge tone="success">, … - Signals: bind
[checked]/(checkedChange)etc.; works under zoneless CD and SSR with no extra setup. - Forms:
formControlName,[(ngModel)]or[formControl]all work — every control is aControlValueAccessor.
Form fields: two levels
- Batteries-included components wire label + hint + error + ARIA for you:
BuiInputField,
BuiMoneyInput (localized currency; symbol="DH" overrides the ISO code), BuiDateRangePicker (start→end with presets), plus BuiSelect, BuiCombobox, BuiAutocomplete, BuiPhoneInput.
- Composition primitives for custom layouts:
buiField+buiFieldLabel/buiFieldDescription
/ buiFieldError wrap a bare buiInput / .blat-* control and manage the a11y relationships.
Reach for a bare control (buiInput) only when you also add the buiField scaffolding yourself. Other easy-to-miss building blocks: buiEmpty (empty states), bui-stat (stat cards), buiFieldSet / buiFieldLegend (grouped fields).
Theming
Styling is Tailwind v4 + CSS variables. Override the oklch design tokens (--background, --foreground, --primary, --border, --muted, --radius, …) to restyle everything globally; toggle a dark class for dark mode. See https://ngblatui.remix-it.com/docs/theming.
What's inside
| Category | Count | Browse | | -------------- | ----- | ---------------------------------------- | | Components | 157 | https://ngblatui.remix-it.com/components | | Blocks | 16 | https://ngblatui.remix-it.com/blocks | | Charts | 70 | https://ngblatui.remix-it.com/charts | | Templates | 34 | https://ngblatui.remix-it.com/templates |
Templates are full, production-style pages (dashboard, pricing, auth, store, CRM, blog, docs, e-commerce product, plus 20 art-directed landing pages) — faithful 1:1 reproductions of the BlatUI originals.
Using with AI agents
ng-blatui is built to be consumed by AI coding assistants so they discover and use the catalog correctly instead of guessing — via three layers:
| Layer | What | Where | | ----------------- | ----------------------------------------------------------- | ------------------------------------------- | | MCP server | Tools to list/search the catalog and fetch full docs + code | npx ng-blatui-mcp | | llms.txt | The llms.txt standard index | https://ngblatui.remix-it.com/llms.txt | | registry.json | Machine-readable catalog | https://ngblatui.remix-it.com/registry.json |
Quick start (works in Claude, Cursor, Windsurf, Cline, Zed, VS Code…):
claude mcp add ng-blatui -- npx -y ng-blatui-mcp
# or add to any MCP client:
# { "mcpServers": { "ng-blatui": { "command": "npx", "args": ["-y", "ng-blatui-mcp"] } } }The MCP server exposes list_components (optional category), list_blocks, list_charts, list_templates, search({ query }) and get_docs({ name }). Full guide with per-client config and copy-paste editor rules: USING-WITH-AI.md.
---
Development
This is an Angular workspace with two projects: the library (projects/ng-blatui) and the docs/demo app (projects/demo).
git clone https://github.com/anousss007/ng-blatui.git
cd ng-blatui
npm install
npm start # serve the docs/demo app at http://localhost:4200Scripts
| Command | What it does | | -------------------------- | -------------------------------------------------------- | | npm start | Serve the demo app (ng serve demo) | | npm run build:lib | Build the publishable library (ng build ng-blatui) | | npm run build | Build the demo site | | npm test | Unit tests (Vitest) | | npm run lint | ESLint (type-aware, strict) + template a11y | | npm run format | Prettier (with Tailwind class sorting) | | npm run build:registry | Regenerate registry.json + llms.txt from the catalog | | npm run capture:previews | Capture template preview images (Playwright) | | npm run deploy:site | Build + deploy the docs site to the VPS |
Project structure
projects/
ng-blatui/ # the published library (src/lib/* = 157 component dirs, public-api.ts)
demo/ # docs + live demo site (components/blocks/charts/templates galleries)
src/app/pages/templates/ # the 34 page templates
public/ # static assets incl. generated llms.txt + registry.json
scripts/
build-registry.mjs # generates registry.json + llms.txt + mcp/registry.json
capture-previews.mjs # template preview screenshots
deploy-site.sh # build + rsync to VPS
mcp/ # the ng-blatui-mcp MCP server package (published separately)
.claude/skills/ # angular-best-practices (contributing) + ng-blatui (consuming)
AGENTS.md # guide for AI agents working IN this repo
USING-WITH-AI.md # guide for consuming ng-blatui WITH an AI agentConventions
Angular v22, zoneless, standalone (defaults — never set explicitly). Signals everywhere; native control flow (@if/@for/@switch); no *ngIf/ngClass. Library selector prefix bui, demo prefix app. See AGENTS.md and CONTRIBUTING.md for the full ruleset.
Releasing
- Library (
ng-blatui) — the Release GitHub Actions workflow (manual dispatch) runssemantic-release: it analyzes Conventional Commits, bumps the version, tags, creates a GitHub release and publishes to npm with provenance. - MCP server (
ng-blatui-mcp) — bumpmcp/package.json, then run the Release MCP workflow (manual dispatch) to publish it.
Credits
Angular port of BlatUI (Blade/Laravel + Tailwind component system). Behavior on Angular Aria + CDK.
