Installation

ng-blatui targets Angular 21 & 22 with Tailwind CSS v4. Three short steps and you're ready.

1. Install the packages

The library plus its headless peers (Angular Aria & the CDK).

npm i ng-blatui @angular/cdk @angular/aria

2. Add Tailwind CSS v4

Install Tailwind and the PostCSS plugin…

npm i -D tailwindcss @tailwindcss/postcss

…then create .postcssrc.json:

// .postcssrc.json
{
  "plugins": { "@tailwindcss/postcss": {} }
}

3. Import the design tokens

In your global src/styles.css — Tailwind, the ng-blatui tokens, and a @source so Tailwind generates the utility classes the components use.

/* src/styles.css */
@import 'tailwindcss';
@import 'ng-blatui/foundations/blatui.css';

/* let Tailwind generate the utilities ng-blatui renders */
@source '../node_modules/ng-blatui';

4. Use a component

Import the standalone directive/component and use it in any template.

import { Component } from '@angular/core';
import { BuiButton } from 'ng-blatui';

@Component({
  selector: 'app-demo',
  imports: [BuiButton],
  template: `<button buiButton>Click me</button>`,
})
export class Demo {}

Next

See every component with live previews and copy-paste code on the Components page, or tune the look from the Customize button (bottom-right).