Spacing

Source: radix-ui.com/themes/docs/theme/spacing

Radix Themes uses a 9-step spacing scale on a 4px base grid. Every step maps to a CSS custom property available as var(--space-N). Scale values are consumed via layout component props (m, p, gap) rather than utility classes — no Tailwind-style className strings.

---

Spacing scale

Step	Value
1	4px
2	8px
3	12px
4	16px
5	24px
6	32px
7	40px
8	48px
9	64px

---

CSS variable tokens

All nine steps are available as CSS custom properties for use in custom components:

var(--space-1)  /* 4px  */
var(--space-2)  /* 8px  */
var(--space-3)  /* 12px */
var(--space-4)  /* 16px */
var(--space-5)  /* 24px */
var(--space-6)  /* 32px */
var(--space-7)  /* 40px */
var(--space-8)  /* 48px */
var(--space-9)  /* 64px */

---

Layout component props

Spacing is applied through the m*, p*, and gap props on layout components. Prop values are the step numbers as strings ("1" through "9"):

<Box p="4" m="2">          {/* padding: 16px, margin: 8px */}
<Flex gap="3">             {/* gap: 12px */}
<Grid gap="5" p="6">      {/* gap: 24px, padding: 32px */}

All layout components (Box, Flex, Grid, Section, Container) accept spacing props. Directional shorthands are also supported: px, py, pt, pr, pb, pl, mx, my, mt, mr, mb, ml.

---

Responsive spacing

All spacing props accept responsive breakpoint objects — passing an object instead of a string applies different values at each breakpoint:

<Box p={{ initial: "2", sm: "4", lg: "6" }}>

Breakpoints: initial (mobile-first, no minimum), xs, sm, md, lg, xl.

---

Global scaling

The scaling prop on <Theme> applies a proportional multiplier to all layout-affecting properties — spacing, font size, and line height — across the entire application:

<Theme scaling="95%">
  <App />
</Theme>

Valid values: "90%", "95%", "100%" (default), "105%", "110%".

Custom components can participate in scaling by referencing the --scaling CSS variable:

.custom-component {
  width: calc(200px * var(--scaling));
}

This is the correct way to implement UI density control — a single scaling prop adjusts the whole application uniformly rather than requiring per-component overrides.

---

Design decisions

• 4px base grid: Consistent with most contemporary design systems (Material, Carbon, Atlassian). Keeps values mentally mappable to common multiples.
• Prop-not-class model: Unlike Tailwind's p-4, Radix Themes consumes the scale through typed React props. This keeps spacing usage within the component tree and makes it refactorable with TypeScript tooling.
• scaling for density: Rather than exposing multiple size tiers for each component, Radix uses a single global multiplier. This is simpler but less granular than Carbon's density modes.