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". 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
0
elevation
1
elevation
2
elevation
4
elevation
8
elevation
16
elevation
24
<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
bg
paper
bg
primary
bg
secondary
bg
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
1
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>