Ng Blatui

ng-blatui for Angular — search components, blocks, charts & templates and read their typed API.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "ng-blatui": {
      "command": "npx",
      "args": [
        "-y",
        "ng-blatui-mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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

Terminal

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:

server.ts

@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.

server.ts

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 a ControlValueAccessor.

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.

Localization

Two providers cover the whole library, both set once in your app config:

server.ts

import { provideBuiLabels, provideBuiLocale } from 'ng-blatui';

providers: [
  provideBuiLocale('fr-BE'), // dates, times, numbers, week start, weekend, week numbering
  provideBuiLabels({ fileUploadRemove: 'Supprimer le fichier' }), // built-in strings
];

Set neither and everything formats as en-US — that is Angular's own LOCALE_ID default, and the usual reason pickers stay American in an app that is not. Resolution runs most-specific first: a component's [locale] input → provideBuiLocale() → the app's LOCALE_ID → en-US. You never need registerLocaleData() here; ng-blatui formats through Intl.

Both providers also take a signal, or a factory run in an injection context — which is what keeps them open to any translation library (Transloco, ngx-translate, a signal store of your own) without ng-blatui depending on one, or knowing any translation format. Full guide, with a Transloco example: https://ngblatui.remix-it.com/docs/localization.

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	35	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…):

Terminal

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).

bash

git clone https://github.com/anousss007/ng-blatui.git
cd ng-blatui
npm install
npm start          # serve the docs/demo app at http://localhost:4200

Scripts

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

Code

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 35 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 agent

Read the full README →View source on GitHub →

Related MCP Servers

View all in Data Visualization View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

Last commit

17d ago

Most recent push to the default branch.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Ng Blatui

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "ng-blatui": { "command": "npx", "args": ["-y","ng-blatui-mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/ng-blatui?style=directory)](https://allmcps.com/mcp/ng-blatui)

HTML Embed

<a href="https://allmcps.com/mcp/ng-blatui"><img src="https://allmcps.com/api/badge/ng-blatui?style=directory" alt="Ng Blatui on AllMCPs" /></a>

Technical Specs & Signals

CategoryData Visualization

8/12 checks healthy over the last 45d

43Quality signal: Fair · 43/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity6/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · ng-blatui-mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📊 Data Visualization →Alternatives to Ng Blatui →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients

Ng Blatui

ng-blatui for Angular — search components, blocks, charts & templates and read their typed API.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "ng-blatui": {
      "command": "npx",
      "args": [
        "-y",
        "ng-blatui-mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

ng-blatui

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

Terminal

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:

server.ts

@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 */

Icons

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.

server.ts

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 a ControlValueAccessor.

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.

Theming

Localization

Two providers cover the whole library, both set once in your app config:

server.ts

import { provideBuiLabels, provideBuiLocale } from 'ng-blatui';

providers: [
  provideBuiLocale('fr-BE'), // dates, times, numbers, week start, weekend, week numbering
  provideBuiLabels({ fileUploadRemove: 'Supprimer le fichier' }), // built-in strings
];

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	35	https://ngblatui.remix-it.com/templates

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…):

Terminal

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"] } } }

Development

This is an Angular workspace with two projects: the library (projects/ng-blatui) and the docs/demo app (projects/demo).

bash

git clone https://github.com/anousss007/ng-blatui.git
cd ng-blatui
npm install
npm start          # serve the docs/demo app at http://localhost:4200

Scripts

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

Code

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 35 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 agent

Read the full README →View source on GitHub →

Related MCP Servers

View all in Data Visualization View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

Last commit

17d ago

Most recent push to the default branch.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Ng Blatui

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "ng-blatui": { "command": "npx", "args": ["-y","ng-blatui-mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/ng-blatui?style=directory)](https://allmcps.com/mcp/ng-blatui)

HTML Embed

<a href="https://allmcps.com/mcp/ng-blatui"><img src="https://allmcps.com/api/badge/ng-blatui?style=directory" alt="Ng Blatui on AllMCPs" /></a>

Technical Specs & Signals

CategoryData Visualization

8/12 checks healthy over the last 45d

43Quality signal: Fair · 43/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity6/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · ng-blatui-mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📊 Data Visualization →Alternatives to Ng Blatui →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients