Paper

Renders white or dark background depending on color scheme
Import

Usage

Paper component renders white (or theme.colors.dark[7] for dark theme) background with shadow, border-radius and padding from theme.

Paper is the most basic ui component
Use it to create cards, dropdowns, modals and other components that require background with shadow
Shadow
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Padding
xs
sm
md
lg
xl
import { Text, Paper } from '@mantine/core';
function Demo() {
return (
<Paper shadow="xs" p="md">
<Text>Paper is the most basic ui component</Text>
<Text>
Use it to create cards, dropdowns, modals and other components that require background
with shadow
</Text>
</Paper>
);
}

Shadow

You can use predefined shadows defined in theme or your own:

<Paper shadow="xs" />
<Paper shadow="13px 18px 25px #e5e5e5, 1px 3px 3px #e5e5e5, -1px 3px 3px #e5e5e5" />

Padding

Paper has predefined padding: xs, sm, md, lg, xl defined in theme.spacing. Alternatively, you can use a number to set padding in px:

<Paper p="sm" /> // -> theme predefined small spacing
<Paper p={20} /> // -> { padding: '20px' }

Radius

xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use a number to set radius in px:

<Paper radius="lg" /> // -> theme predefined large radius
<Paper radius={0} /> // -> { borderRadius: 0 }

Get root element ref

You can get root element ref with ref prop:

import { useRef } from 'react';
import { Paper } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLDivElement>();
return <Paper ref={ref} />;
}