PrimitivesStable

Box

Parity report: docs/atoms.md

A layout box with props locked to tokens: p / px / py / pt…pl are --space-* keys; bg is a semantic color; radius, border (bool), shadow an elevation. All become inline style with var(--…).

Not Tailwind or runtime CSS-in-JS — a small, typed set of props → CSS vars. as picks the element (div · section · article · ul…). Padding only, no margin — spacing between siblings is <Stack gap>'s job.

When to use

  • A container with a background, border, radius and/or padding — a simple card, a section, a highlighted block.
  • Spacing / aligning children in a direction → Stack. A card with slots (media, header, footer) → Card. A toned message → InfoCard.

Examples

Padding scale
p=8
p=16
p=24
p=32
<Box p="8" bg="surface-second" radius="md" border>p=8</Box>
<Box p="16" bg="surface-second" radius="md" border>p=16</Box>
<Box p="24" bg="surface-second" radius="md" border>p=24</Box>
Elevation
shadow=sm
shadow=md
shadow=lg
shadow=xl
<Box p="16" bg="surface-first" radius="lg" shadow="sm">shadow=sm</Box>
<Box p="16" bg="surface-first" radius="lg" shadow="xl">shadow=xl</Box>

Playground

Conteúdo da caixa
p
radius
shadow
<Box p="16" bg="surface-first" radius="lg" border>Conteúdo da caixa</Box>

Props

PropTypedefaultDescription
as"div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "span" | "ul" | "ol" | "li"—Elemento renderizado. Default `"div"`.
bgenum—Cor de fundo — token semântico.
borderboolean—Borda `1px solid var(--color-border-default)`.
p"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"—Padding (todos os lados) — chave de `--space-*`.
pb"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
pl"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
pr"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
pt"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
px"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"—Padding horizontal.
py"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"—Padding vertical.
radius"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"—Raio dos cantos.
shadow"sm" | "md" | "lg" | "xl"—Sombra — token de elevação.

Accessibility

  • No role of its own — choose the semantic as (section, nav, aside…) when the block has meaning. The bg colors come from tokens with contrast checked in both themes.