Ng Blatui MCP server

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.

157 components · 16 blocks · 70 charts · 35 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, OnPush by 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.txt index and a machine-readable registry (see below).

Installation

npm i ng-blatui

Peer 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 (); 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: , , …
• Attribute/directive selectors: , , , …
• 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 a ControlValueAccessor.

Form fields: two levels

Shortened. The full README is on GitHub.