Composition

Stack & Cluster

nbStack is the default primitive for vertical rhythm. nbCluster is the default primitive for inline groups that may wrap. Use them everywhere instead of manually wiring up flex utilities.

When to use each

nbStack

Vertical flow with consistent gap. Use for page sections, form groups, card content, lists, and anywhere content stacks top-to-bottom.

nbCluster

Horizontal flow that wraps to multiple lines. Use for actions, chips, toolbar rows, tags, badges, and any group of inline items.

Stack — vertical card content

A job card using Stack to control vertical rhythm between title, description, and action.

Hiring now

Open role

Compose content vertically with predictable spacing.

Cluster — chip group

A Cluster wraps chips inline, letting them reflow naturally without fixed-width constraints.

AngularSignalsZonelessTypeScript

Combined inside a Surface

Stack and Cluster working together inside a Surface. The outer Stack controls top-level spacing; the inner Clusters handle inline groups.

Senior Angular Engineer

Build loud UI primitives.

RemoteFull-timeUrgent

Gap values

Both Stack and Cluster use the same gap scale. Pick the right gap for the relationship between items — tight for related items, wider for distinct groups.

xs
Related items
sm
Tight groups
md
Card sections
lg
Distinct regions
xl
Page sections

Key inputs

gapnbStack

Vertical spacing — xs, sm, md, lg, xl

alignnbStack

Cross-axis — stretch, start, center, end

justifynbStack

Main-axis — start, center, end, between

separatornbStack

Divider between children — none, solid, dashed, thick

gapnbCluster

Horizontal spacing — xs, sm, md, lg, xl

alignnbCluster

Cross-axis — start, center, end, baseline, stretch

justifynbCluster

Main-axis — start, center, end, between

wrapnbCluster

Wrapping — wrap (default), nowrap

See the full APIs: Stack and Cluster.