Cluster & Filler — Layout Primitives

Cluster and Filler are the primary layout primitives in this design system. They replace Cards, justify-between, and any opaque wrapper pattern.

Core Rules

1. Clusters are always transparent — they never render a background. The bg prop sets a CSS variable (--cluster-bg) that direct children inherit via a zero-specificity @layer base rule.
2. Every direct child of a Cluster must be a solid element — it should have its own visual identity (background color, etc.). Never place bare text or icons as direct Cluster children.
3. No borders, no rounded corners — borders are almost never used in this design system. The only exception is the outline button variant. The theme radius is 0rem — never add rounded-* classes to layout elements. Clusters, Fillers, inputs, and all layout elements rely on background color contrast and spacing for visual separation, not border lines or rounded shapes. Never add border or rounded-* to Cluster children, Fillers, or layout wrappers.
4. Use <Filler /> for space distribution — never use justify-between, justify-end, or justify-around. Filler is an invisible flex-1 spacer with aria-hidden="true".
5. Children can override the inherited bg — since the inheritance rule uses :where() (zero specificity) inside @layer base, any bg-* utility on a child wins naturally.

Import

import { Cluster, Filler } from '@/components/ui/cluster'

Cluster Props