Paper

Renders white or dark background depending on color scheme

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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

With border

<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} />;
}

Go back

Divider – @mantine/core

Up next

Popper – @mantine/core

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter