Paper

A surface container with a physical depth model. Use elevation (0–5) to apply both a surface color and a matching shadow in one prop — surfaces tint progressively in dark mode using color-mix() with the active primary color. Use shadow for raw CSS escape-hatch control, radius for corner rounding, and withBorder for a visible edge. Render as any element via component.

Elevation scale

Each level applies a surface background and a matching shadow. Level 0 is flush with the page; level 5 floats above everything. Switch to dark mode to see the primary-color tinting on levels 1–5.

elevation=0

elevation=1

elevation=2

elevation=3

elevation=4

elevation=5

<Paper elevation={0}>0 — page base</Paper>
<Paper elevation={1}>1 — panels, sidebar</Paper>
<Paper elevation={2}>2 — sticky headers</Paper>
<Paper elevation={3}>3 — dropdowns</Paper>
<Paper elevation={4}>4 — modals, drawers</Paper>
<Paper elevation={5}>5 — tooltips, toasts</Paper>

Glass variant

A frosted-glass material for hero overlays, floating navbars, and cards over image backgrounds. Communicates a different material rather than a different height.

Glass surface

Frosted blur over the gradient background. Works best over rich imagery or color.

<div style={{ background: 'linear-gradient(135deg, violet, blue)', padding: '2rem' }}>
  <Paper variant="glass" style={{ padding: 'var(--dv-spacing-lg)' }}>
    Glass surface content
  </Paper>
</div>

Shadow

When you need a specific shadow independent of the surface color system, use shadow. It overrides the elevation shadow while leaving the surface background unchanged.

shadow="xs"

shadow="sm"

shadow="md"

shadow="lg"

shadow="xl"

<Paper shadow="xs">xs</Paper>
<Paper shadow="sm">sm</Paper>
<Paper shadow="md">md</Paper>
<Paper shadow="lg">lg</Paper>
<Paper shadow="xl">xl</Paper>

Radius

radius="xs"

radius="sm"

radius="md"

radius="lg"

radius="xl"

<Paper elevation={1} radius="xs">xs radius</Paper>
<Paper elevation={1} radius="sm">sm radius</Paper>
<Paper elevation={1} radius="md">md radius</Paper>
<Paper elevation={1} radius="lg">lg radius</Paper>
<Paper elevation={1} radius="xl">xl radius</Paper>

With border

Paper with a visible border — pairs well with elevation for a crisp edge.

<Paper elevation={1} withBorder style={{ padding: 'var(--dv-spacing-md)' }}>
  Paper with a visible border
</Paper>

Semantic element

Rendered as <section>

elevation=2 component="section"

<Paper elevation={2} component="section" radius="md">
  <Stack gap="xs">
    <Text fw={700}>Semantic section</Text>
    <Text size="sm" c="dimmed">elevation={2} component="section"</Text>
  </Stack>
</Paper>

Props

PropTypeDefaultDescription
elevation0|1|2|3|4|5—Elevation level — sets both surface color and shadow
variant'glass'—Frosted-glass surface material
shadow'xs'|'sm'|'md'|'lg'|'xl'|string—Raw shadow override (escape hatch; prefer elevation)
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Corner radius
withBorderboolean—Adds a visible border
componentstring'div'Root element override