Ng Blatui

БесплатноНе проверен

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

автор: io.github.anousss007

GitHub Embed

Описание

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

README

npm license Angular

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

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 (<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="[email protected]" />
    </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…):

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

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

from github.com/anousss007/ng-blatui

Установка Ng Blatui

У этого сервера нет опубликованного пакета — он собирается из исходников. Открой репозиторий и следуй инструкции в README.

▸ github.com/anousss007/ng-blatui

FAQ

Ng Blatui MCP бесплатный?

Да, Ng Blatui MCP бесплатный — установка в пару кликов через Unyly без оплаты.

Нужен ли API-ключ для Ng Blatui?

Нет, Ng Blatui работает без API-ключей и переменных окружения.

Ng Blatui — hosted или self-hosted?

Доступен hosted-вариант: Unyly запускает сервер в облаке, локальная установка не обязательна.

Как установить Ng Blatui в Claude Desktop, Claude Code или Cursor?

Открой Ng Blatui на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.

Compare Ng Blatui with

Ng BlatuivsGitHub Ng BlatuivsFilesystem Ng BlatuivsMemory Ng BlatuivsTemplate MCP Server

Не уверен что выбрать?

Найди свой стек за 60 секунд

Автор?

Embed-бейдж для README

Похожее

Все в категории development

Command Palette