Paper

An elevated surface primitive that extends View. Adds visual surface styling - shadow via theme.shadows, a default bg="paper" background, and a default borderRadius="md".

Source

An elevated surface primitive that extends View. Adds visual surface styling - shadow via theme.shadows, a default bg="paper" background, and a default borderRadius="md". Consumers compose Flex or Grid inside Paper for layout.

Examples

Default

A surface with default elevation, background, and border radius.

<Paper
  elevation={1}
  p={3}
  width="320px"
>
  A surface with default elevation, background, and border radius.
</Paper>

Elevations

elevation

<Flex flexDirection="row" flexWrap="wrap" gap={3}>
  {([0, 1, 2, 4, 8, 16, 24] as const).map((n) => (
    <Paper key={n} elevation={n} p={3} width="120px">
      <Typography variant="caption" color="secondary" m={0}>
        elevation
      </Typography>
      <Typography variant="body2" m={0}>
        {n}
      </Typography>
    </Paper>
  ))}
</Flex>

Background Tokens

paper

primary

secondary

modal

<Flex flexDirection="row" flexWrap="wrap" gap={3}>
  {(['paper', 'primary', 'secondary', 'modal'] as const).map((bg) => (
    <Paper key={bg} bg={bg} elevation={2} p={3} width="140px">
      <Typography variant="caption" color="secondary" m={0}>
        bg
      </Typography>
      <Typography variant="body2" m={0}>
        {bg}
      </Typography>
    </Paper>
  ))}
</Flex>

Aspect Ratio

4/3

16/9

<Flex flexDirection="row" flexWrap="wrap" gap={3}>
  {(['1', '4/3', '16/9'] as const).map((ratio) => (
    <Paper key={ratio} elevation={2} aspectRatio={ratio} width="160px">
      <Flex height="100%" alignItems="center" justifyContent="center">
        <Typography variant="caption" color="secondary" m={0}>
          {ratio}
        </Typography>
      </Flex>
    </Paper>
  ))}
</Flex>

Composed

Card Title

Compose Flex or Grid inside Paper for layout. Paper intentionally has no flex or grid props.

<Paper elevation={3} p={4} width="320px">
  <Flex flexDirection="column" gap={2}>
    <Typography variant="h5" m={0}>
      Card Title
    </Typography>
    <Typography variant="body2" color="secondary" m={0}>
      Compose Flex or Grid inside Paper for layout. Paper intentionally has no flex or grid
      props.
    </Typography>
  </Flex>
</Paper>