Density

Density is a per-component axis of semantic boolean props: compact tightens a component's spacing, comfortable relaxes it, and omitting both gives the regular default. There is no app-wide density switch.

How it works

Pass compact for tight spacing, comfortable for generous spacing, or neither for the regular default. Each component resolves its own padding and gaps from the prop; no document attribute or stylesheet changes density globally.
Compact
compact
Tight spacing for dense data views (tables, admin panels)
Regular
default
Balanced spacing for most interfaces
Comfortable
comfortable
Generous spacing for reading-heavy or touch-friendly layouts

Live demo

The same search toolbar rendered at each density level.
Compact
2 results
Regular
2 results
Comfortable
2 results

Extending

Anatomy. Give your own components the same axis: accept compact and comfortable booleans and resolve the spacing from them, the way the built-ins do. To remember a user's choice on the web, setDensity persists it and getDensity reads it back; the app then applies it by passing the matching booleans down, because no stylesheet reads the stored preference.
tsx
// The density axis is resolved by each component.
<Card compact>...</Card>
<Card comfortable>...</Card>
// An app may persist a preference, then apply it through props.
setDensity("compact");
const density = getDensity();
<Card compact={density === "compact"} comfortable={density === "comfy"}>...</Card>;
← Accessibility
Form Validation →