# ng-blatui
**Category:** π Data Visualization
**Repository:** https://github.com/anousss007/ng-blatui
**npm Downloads (last month):** 764
**Views:** 0
**Installs:** 0
**Upvotes:** 0
**Directory Page:** https://allmcps.com/mcp/ng-blatui
## Description
ng-blatui for Angular β search components, blocks, charts & templates and read their typed API.
## Claude Desktop Quick Installation
Heuristic fallback β verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low):
```json
"mcpServers": {
"ng-blatui": {
"command": "npx",
"args": ["-y","ng-blatui"]
}
}
```
## Documentation & README
# ng-blatui
[](https://www.npmjs.com/package/ng-blatui)
[](./LICENSE)
[](https://angular.dev)
Accessible **Angular UI library** β a faithful port of [BlatUI](https://ngblatui.remix-it.com)'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 β](https://ngblatui.remix-it.com)** Β· π¦ **[npm](https://www.npmjs.com/package/ng-blatui)** Β· π€ **[Using with AI β](./USING-WITH-AI.md)**
---
## 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
```bash
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:
```css
@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`](https://ng-icons.github.io/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`**.
```ts
import { Component } from '@angular/core';
import { BuiButton, BuiBadge, BuiInput } from 'ng-blatui';
@Component({
selector: 'app-demo',
imports: [BuiButton, BuiBadge, BuiInput],
template: `
`,
})
export class Demo {}
```
- **Element selectors**: ``, ``, β¦
- **Attribute/directive selectors**: `