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
Padding
xs
sm
md
lg
xl
Shadow
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
<Paper padding="md" shadow="xs">
<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 with predefined shadow from theme
</Paper>
<Paper shadow="13px 18px 25px #e5e5e5, 1px 3px 3px #e5e5e5, -1px 3px 3px #e5e5e5">
Paper with custom shadow
</Paper>

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 padding="sm" /> // -> theme predefined small spacing
<Paper padding={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();
return <Paper ref={ref} />;
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback