Installation

Prerequisites

Components are composed from Tailwind utilities applied through nbClass. The library expects your app to have Tailwind CSS v4 configured and scanning your project source. The ng add schematic handles this automatically for Angular CLI apps.

Automatic setup

Use the schematic when you want the package, Tailwind CSS v4, PostCSS, and global style imports configured for you.

ng add @ng-brutalism/ui

Manual setup

Use manual setup when Tailwind is already managed by your app or when you want to review each change yourself.

npm install @ng-brutalism/ui
# or
pnpm add @ng-brutalism/ui

Styles

For manual setup, import Tailwind and the bundled stylesheet once at your app's entry (e.g. src/styles.css). It includes the default theme tokens; import @ng-brutalism/ui/theme.css directly only when you need the token sheet by itself.

@import "tailwindcss";
@import '@ng-brutalism/ui/styles.css';

Provider (optional)

The provider is only needed if you want to override theme tokens from Angular config. The simpler alternative is to redefine the CSS custom properties in your own stylesheet.

import { ApplicationConfig } from '@angular/core';
import { provideNgBrutalism } from '@ng-brutalism/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgBrutalism({
      theme: {
        radius: '0px',
        borderWidth: '3px',
      },
    }),
  ],
};

Usage

import { Component } from '@angular/core';
import { NbButton } from '@ng-brutalism/ui';

@Component({
  selector: 'app-example',
  imports: [NbButton],
  template: `<button nbButton variant="neutral" style="--nb-button-bg: #fff">Ship it</button>`,
})
export class Example {}