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

Shadow

Radius

Padding

With border

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

Go back

Divider – @mantine/core

Up next

Popper – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter