Is the ng-blatui MCP server free to use?

Yes. ng-blatui is listed on AllMCPs as a free, open Model Context Protocol server you can install into Claude Desktop, Cursor, or any MCP-compatible client.

Is the ng-blatui MCP server free to use?

Yes. ng-blatui is listed on AllMCPs as a free, open Model Context Protocol server you can install into Claude Desktop, Cursor, or any MCP-compatible client.

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

Manual Client & Custom JSON ConfigExpand JSON ▾

Install Config Generator

Choose your client

claude_desktop_config.json

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

💡 Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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.

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

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

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

Conventions

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) runs semantic-release: it analyzes Conventional Commits, bumps the version, tags, creates a GitHub release and publishes to npm with provenance.
MCP server (ng-blatui-mcp) — bump mcp/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.

License

MIT

Related MCP Servers

View all in Data Visualization View all alternatives

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

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

0/4 checks healthy over the last 6h

31Quality signal: Emerging · 31/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 ownership8/20

Documentation & tools11/30

Adoption & activity4/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.

★ Featured

AllMCPs Server

The official MCP server for AllMCPs.com - submit and manage tools directly from your AI. The open directory for MCP servers. Connect Claude, Cursor, Windsurf, and AI agents to databases, tools, files, and APIs. Explore 3,181+ servers. AllMCPs is the premier, open directory for discovering, evaluating, and installing Model Context Protocol (MCP) servers to equip AI agents and LLMs with real-world superpowers.

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to get the verified badge.

Free dofollow backlink: after claiming, verify your product site and place a dofollow AllMCPs badge — we recheck it 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

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

Manual Client & Custom JSON ConfigExpand JSON ▾

Install Config Generator

Choose your client

claude_desktop_config.json

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

💡 Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

Documentation Overview

ng-blatui

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, 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

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

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

Conventions

Releasing

Library (ng-blatui) — the Release GitHub Actions workflow (manual dispatch) runs semantic-release: it analyzes Conventional Commits, bumps the version, tags, creates a GitHub release and publishes to npm with provenance.
MCP server (ng-blatui-mcp) — bump mcp/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.

License

MIT

Related MCP Servers

View all in Data Visualization View all alternatives

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

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

0/4 checks healthy over the last 6h

31Quality signal: Emerging · 31/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 ownership8/20

Documentation & tools11/30

Adoption & activity4/15

Community engagement0/10

★ Featured

AllMCPs Server

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to get the verified badge.

Free dofollow backlink: after claiming, verify your product site and place a dofollow AllMCPs badge — we recheck it 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