Paper
Renders white or dark background depending on color scheme
Import
Source
Docs
Package
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
Shadow
Radius
<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 backgroundwith 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 element ref
You can get root element ref with elementRef prop:
import { useRef } from 'react';import { Paper } from '@mantine/core';function Demo() {const ref = useRef();return <Paper elementRef={ref} />;}
Built by Vitaly Rtishchev and these awesome people