Style Props

Spacing — margin & padding

Size tokens ('xs' – 'xl') resolve to var(--dv-spacing-*). A number is treated as rem. Any other string is passed through as-is.

<Box p="md">uniform padding</Box>
<Box px="xl" py="xs">horizontal / vertical padding</Box>
<Box pt="lg" pb="xs" pl="sm">individual sides</Box>
<Box mt="md" mb="xs">top / bottom margin</Box>
<Box mx="auto">auto horizontal margin (centering)</Box>

Physical vs logical (inline) props

Props like ml and pl set physical left/right sides — they are always left or always right regardless of the document's writing direction. The logical inline props (ms / me and their aliases mis / mie, ps / pe / pis / pie) map to margin-inline-start / margin-inline-end and padding-inline-start / padding-inline-end.

In a left-to-right layout, start = left and end = right. In a right-to-left layout (e.g. Arabic, Hebrew), they automatically flip — no extra CSS needed. Prefer the logical props for any spacing that relates to text flow or reading direction.

{/* Physical — always left in any language */}
<Box ml="lg">margin-left</Box>
<Box pl="lg">padding-left</Box>

{/* Logical — flips in RTL automatically */}
<Box ms="lg">margin-inline-start</Box>
<Box ps="lg">padding-inline-start</Box>
<Box me="lg">margin-inline-end</Box>
<Box pe="lg">padding-inline-end</Box>

UiSpacing — 'xs' | 'sm' | 'md' | 'lg' | 'xl' (token) | number (rem) | string (raw CSS)

Color — c and bg

Both c (text color) and bg (background) resolve palette names, dot-notation shade/variant selectors, semantic aliases, and raw CSS values. See the Colors page for a full reference with live examples.

c — text color

A plain scale name resolves to -light-color — the accessible text color for tinted backgrounds. Use dot notation to target a specific shade or variant token, or a semantic alias for surface and status colors.

<Text c="violet">scale name → -light-color</Text>
<Text c="violet.6">specific shade</Text>
<Text c="violet.outline">match border color</Text>
<Text c="dimmed">secondary text</Text>
<Text c="error">error / validation</Text>
<Text c="#e67e22">any CSS color</Text>

bg — background

A plain scale name resolves to -light (tinted fill). Use "surface" or "body" for the standard UI surface tokens, or dot notation for a filled or specific-shade background. Raw CSS values (gradients, image URLs, hex, etc.) pass through unchanged.

<Box bg="violet">tinted background</Box>
<Box bg="violet.filled" c="violet.filled-color">solid filled</Box>
<Box bg="violet.3" c="violet.9">specific shade</Box>
<Box bg="surface">panel / sidebar background</Box>
<Box bg="body">page background</Box>
<Box bg="error" c="bright">error state</Box>
<Box bg="linear-gradient(135deg,#7950f2,#228be6)">raw gradient</Box>

Semantic aliases

Dot notation

Append .N (0–9) for a specific palette shade, or a variant suffix for a semantic token. Works identically on both c and bg.

c="violet.6"           // var(--dv-color-violet-6)
c="violet.filled"      // var(--dv-color-violet-filled)
c="violet.filled-color"// var(--dv-color-violet-filled-color)
c="violet.light"       // var(--dv-color-violet-light)
c="violet.light-color" // var(--dv-color-violet-light-color)
c="violet.outline"     // var(--dv-color-violet-outline)

Typography

fz size tokens resolve to var(--dv-font-size-*); a number becomes rem. All other typography props pass their value directly to CSS.

<Text fz="xl" fw={700}>Large bold</Text>
<Text fz="sm" c="dimmed">Small dimmed</Text>
<Text tt="uppercase" fz="xs" lts="0.08em">uppercase label</Text>
<Text td="underline">underlined</Text>
<Text fs="italic">italic</Text>
<Text ta="center">centered</Text>

Sizing

A number is treated as pixels. A string is passed through as raw CSS.

<Box w={200} h={48} />
<Box w="50%" h="4rem" />
<Box maw={400} p="sm">max 400px wide</Box>
<Box mih={100}>at least 100px tall</Box>

Visual

bdrs size tokens resolve to var(--dv-radius-*); a number becomes rem; 'default' uses var(--dv-radius-default).

<Box bdrs="xl" />          {/* var(--dv-radius-xl) */}
<Box bdrs="50%" />         {/* raw CSS → circle */}
<Box opacity={0.5} />
<Box
  bgsz="cover"
  bgp="center"
  bgr="no-repeat"
  bg="url('/hero.jpg')"
/>

Layout & positioning

Dimension values (top, left, etc.) follow the same number→px rule as sizing props.

<Box pos="absolute" top={8} right={8}>pinned</Box>
<Box pos="relative" />
<Box display="flex" flex="1" />
<Box display="grid" />

Works on every component

Style props are not exclusive to Box — every UI component accepts the full set. Mix them freely with component-specific props.

<Button mt="md" mb="xs" variant="light">
  Button with margin
</Button>

<Badge fz="xs" tt="uppercase" lts="0.05em" px="md">
  Custom badge
</Badge>

<Text fz="lg" fw={700} c="violet" td="underline">
  Styled text
</Text>