Getting Started
Build loud.Stay sharp.
@ng-brutalism/ui gives modern Angular apps a token-driven primitive composition system with directive-first APIs, keyboard-ready interactions, hard-edged visuals, and Tailwind v4 ergonomics from the first import.
Why it stands out
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.
Quick start
Install the package, import the stylesheet once, then pull each primitive into the Angular component that actually uses it.
import { Component } from '@angular/core';
import { NbButton } from '@ng-brutalism/ui';
@Component({
selector: 'app-ship-button',
imports: [NbButton],
template: `
<button nbButton type="button">
Ship the thing
</button>
`,
})
export class ShipButton {}Start exploring
Start with the composition grammar, then move into setup and individual primitives.
Composition system
v0.2.0 introduces a stronger composition system for building loud, token-driven, Angular-first brutalist UIs. Small primitives that lock together like LEGO — each primitive owns one job.
nbSurface creates the panel. nbSection creates regions inside the panel. nbStack controls vertical rhythm. nbCluster controls horizontal wrapping groups. nbSplit creates main/aside layouts. Layer in nbButton, nbChip, nbText, and nbDisplay to build complete product UIs.
<!-- Surface wraps. Section divides. Stack and Cluster compose. -->
<article nbSurface tone="cream" radius="xl" shadow="hard" border="strong" clip>
<header nbSection padding="lg" divider="bottom">
<div nbCluster gap="sm" align="center" justify="between">
<h2 nbTitle>Launch checklist</h2>
<span nbChip tone="yellow">v0.2.0</span>
</div>
</header>
<div nbSection padding="lg">
<div nbStack gap="md">
<p nbText>Build loud UIs with composable primitives.</p>
<div nbCluster gap="xs">
<span nbChip tone="mint">Surface</span>
<span nbChip tone="pink">Section</span>
<span nbChip tone="lavender">Stack</span>
</div>
</div>
</div>
<footer nbSection padding="lg" divider="top" layout="between" align="center">
<span nbText tone="muted">Ready for release</span>
<button nbButton tone="black">Ship it</button>
</footer>
</article>Utility included
nbClass is exported from @ng-brutalism/ui and merges conditional class arrays with clsx plus tailwind-merge. Use it in your own components when you want the same conditional styling ergonomics the library uses internally.