Build loud. Stay sharp.

ng-brutalism is a neo-brutalist Angular UI primitive library and composition system for building loud, token-driven Angular interfaces with directive-first APIs, signals, zoneless-friendly patterns, Tailwind CSS v4, chunky borders, offset shadows, and punchy colors.

If you like shadcn/ui or daisyUI, but for Angular and built around brutalism.

Documentation · npm · GitHub

v0.2.0 ships a full composition system. The new layout grammar — Surface, Section, Stack, Cluster, and Split — lets you compose complete card layouts, multi-column pages, and recipe UIs entirely from library primitives with consistent token-driven spacing, border, shadow, and typography.

New primitives: NbSurface, NbSection, NbStack, NbCluster, NbSplit, NbMediaFrame, NbText, NbDisplay, NbStat, NbRating, NbProgress, NbStatusDot, NbCallout, NbMediaItem, NbAvatarGroup, NbChip, NbChipGroup, NbIconButton, NbSticker, NbHalftone, NbSeparator — plus three ready-made composition recipes.

See CHANGELOG.md for full details and migration notes.

Requires Node 20.19+ or 22.12+, Angular 21, and Tailwind CSS v4.

Automatic setup:

ng add @ng-brutalism/ui

The schematic installs the package, configures Tailwind CSS v4 when needed, and adds the bundled styles to your global stylesheet.

Manual setup:

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

Import the styles once in your global CSS:

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

Use a component:

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

@Component({
  selector: 'app-root',
  imports: [NbButton],
  template: `<button nbButton>Click</button>`,
})
export class App {}

• Angular first: Built as Angular primitives with directive APIs, signal-friendly internals, and native interaction patterns that fit modern Angular apps.
• Loud by default: Chunky borders, offset shadows, punchy color, and compact motion make interfaces feel instantly brutalist.
• Easy to bend: CSS custom properties and Tailwind utilities keep theme overrides local, visible, and predictable.

Optional — configure a subset of theme tokens from TypeScript at bootstrap. Sets the corresponding --nb-* custom properties for these keys. Tokens outside NbThemeConfig (e.g. --nb-background, --nb-field-bg) must still be overridden in CSS.

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

bootstrapApplication(AppComponent, {
  providers: [
    provideNgBrutalism({
      theme: {
        primary: '#ffd166',
        radius: '4px',
        borderWidth: '3px',
      },
    }),
  ],
});

Full installation guide →

ng-brutalism is a composition system, not just a component list. Use primitives like nbSurface, nbSection, nbSplit, nbStack, and nbCluster as the layout grammar. Add emphasis with nbChip, nbCallout, nbSticker, and nbStatusDot. Finish with typography, media, forms, and action primitives.

Inputs are for common design decisions. CSS variables are for local art direction. Classes are for layout escape hatches.

Three ready-made recipes ship with v0.2.0, each assembled entirely from library primitives:

Does ng-brutalism support Angular 21? Yes — it is built and tested against Angular 21. Earlier Angular versions are not supported.

Do I need Tailwind CSS v4? Yes. ng-brutalism is built around Tailwind CSS v4 and CSS custom properties. It ships with an Angular CLI schematic that helps you get the required styling setup ready out of the box.

Can I use ng-brutalism without zoneless mode? Yes. Components are designed for modern Angular: standalone imports, signal-friendly internals, and zoneless-friendly interaction patterns. They work in zoneless apps and in apps that still run with zone.js.

Does ng-brutalism work with server-side rendering (SSR)? The UI package avoids browser-only assumptions in core primitives where possible, and browser-dependent behavior is kept behind Angular platform checks when needed.

How customizable is the theme? All visual tokens are exposed as CSS custom properties (--nb-*). A subset of tokens can also be configured from TypeScript via provideNgBrutalism({ theme: ... }) at bootstrap.

Is ng-brutalism ready for production? It is pre-1.0. Component APIs are usable today, but minor versions may include breaking changes while the library settles.

v0.2.0 contains breaking changes. The Component/Directive suffix was dropped from all exported names: NbCardComponent → NbCard, NbButtonDirective → NbButton, NbSelectComponent → NbSelect, etc. The defaultValue / defaultOpen inputs on <nb-accordion> and <nb-select> were removed in favour of [value] / [(value)] bindings. NbSection's border input was renamed to divider.

See CHANGELOG.md for the complete list.

Created by Khang Tran. MIT licensed. Source code is available on GitHub.

@ng-brutalism/ui is pre-1.0. The component APIs are usable today, but minor versions may include breaking changes while the library settles.

Issues and pull requests are welcome. See CONTRIBUTING.md for details.

MIT