{
"markdown": "# ng-blatui\n\n[](https://www.npmjs.com/package/ng-blatui)\n[](./LICENSE)\n[](https://angular.dev)\n\nAccessible **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.\n\n**157 components · 16 blocks · 70 charts · 35 page templates** — all standalone, signal-based, zoneless and SSR-safe.\n\n🔗 **[Docs & live demo →](https://ngblatui.remix-it.com)** · 📦 **[npm](https://www.npmjs.com/package/ng-blatui)** · 🤖 **[Using with AI →](./USING-WITH-AI.md)**\n\n---\n\n## Highlights\n\n- **Angular 21 & 22** — standalone components, **signals** (`input()`/`model()`/`output()`), **zoneless** change detection, `OnPush` by default.\n- **SSR-ready** — every component renders correctly under server-side rendering (the docs site prerenders 280+ static routes).\n- **Accessible** — behavior built on `@angular/aria` + `@angular/cdk`; passes AXE / WCAG AA.\n- **Forms-native** — every form control implements `ControlValueAccessor`, so the same component works with Reactive, Template-driven and Signal forms.\n- **Themeable** — Tailwind v4 utilities + CSS variables (oklch tokens); light/dark out of the box.\n- **AI-ready** — ships an MCP server, an `llms.txt` index and a machine-readable registry (see below).\n\n## Installation\n\n```bash\nnpm i ng-blatui\n```\n\nPeer dependencies (Angular **21 or 22**): `@angular/core`, `@angular/common`, `@angular/forms`, `@angular/cdk`, `@angular/aria`.\n\n### Tailwind CSS setup\n\nStyling is **Tailwind CSS v4**. In your app's global stylesheet (e.g. `src/styles.css`) add three lines:\n\n```css\n@import 'tailwindcss';\n@import 'ng-blatui/foundations/blatui.css'; /* design tokens + dark theme */\n@source '../node_modules/ng-blatui'; /* ← generate the utilities the lib's classes use */\n```\n\nThe **`@source`** line is the easy one to miss: without it Tailwind never scans ng-blatui's\ncompiled templates, so the components render **unstyled**. Point it at wherever `ng-blatui` lives\nrelative to the stylesheet (adjust the `../` depth). Dark mode is a `dark` class on a parent\n(``); override any oklch token in `:root` / `.dark` to re-theme. Full guide:\n**https://ngblatui.remix-it.com/docs/installation**.\n\n### Icons\n\nng-blatui ships no icon set — wire your own (e.g. [`@ng-icons`](https://ng-icons.github.io/ng-icons/))\nwith `provideIcons(...)` and register each icon you use. Components that take an icon accept an SVG\npath `d` string, so any icon source works.\n\n## Usage\n\nImport the component class from the `ng-blatui` barrel and add it to a standalone component's `imports[]` — no NgModule. Selectors are prefixed **`bui`**.\n\n```ts\nimport { Component } from '@angular/core';\nimport { BuiButton, BuiBadge, BuiInput } from 'ng-blatui';\n\n@Component({\n selector: 'app-demo',\n imports: [BuiButton, BuiBadge, BuiInput],\n template: `\n \n \n `,\n})\nexport class Demo {}\n```\n\n- **Element selectors**: ``, ``, …\n- **Attribute/directive selectors**: `