Box
A polymorphic layout primitive. Renders any HTML element with shorthand props for spacing (p, m), sizing (w, h), color (c, bg), and typography (fz, fw) — no class names required.
Spacing
p="md" — uniform padding
px="xl" py="xs" — horizontal / vertical
pt="lg" pb="xs" pl="sm" — individual sides
<Box p="md">uniform padding</Box>
<Box px="xl" py="xs">horizontal / vertical</Box>
<Box pt="lg" pb="xs" pl="sm">individual sides</Box>Color & background
Violet text
Light background
<Box c="var(--dv-color-violet-filled)" fw={700}>Violet text</Box>
<Box bg="var(--dv-color-violet-light)" c="var(--dv-color-violet-light-color)" p="sm">
Light background
</Box>Typography
fz="xl" fw=700
fz="sm" dimmed
tt="uppercase"
ta="center"
<Box fz="xl" fw={700}>Large bold text</Box>
<Box fz="sm" c="var(--dv-color-dimmed)">Small dimmed text</Box>
<Box tt="uppercase" fw={600} fz="xs">uppercase label</Box>
<Box ta="center">Centered text</Box>Sizing
maw=300 — wraps rather than overflows
<Box w={200} h={48} />
<Box maw={300} p="sm">content constrained to 300px</Box>Polymorphic element
spansection
<Box component="span" px="sm" py="xs">inline span</Box>
<Box component="section" p="md">section element</Box>Props
| Prop | Type | Default | Description |
|---|---|---|---|
component | string | 'div' | Root HTML element |
m / mt / mr / mb / ml / mx / my | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Margin shorthand props |
p / pt / pr / pb / pl / px / py | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Padding shorthand props |
c | string | — | Text color (CSS value) |
bg | string | — | Background color or image (CSS value) |
ta | 'left' | 'center' | 'right' | 'justify' | — | Text alignment |
fz | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string | — | Font size |
fw | number | string | — | Font weight |
lh | string | number | — | Line height |
ff | string | — | Font family |
fs | string | — | Font style (e.g. 'italic') |
tt | 'uppercase' | 'lowercase' | 'capitalize' | 'none' | — | Text transform |
td | string | — | Text decoration |
w / h | string | number | — | Width / height (number → px) |
maw / mah | string | number | — | Max-width / max-height |
miw / mih | string | number | — | Min-width / min-height |
display | string | — | CSS display value |
pos | string | — | CSS position value |
opacity | number | — | CSS opacity (0–1) |