v1.3.1
⌘K
Source codeDiscussReport issue

Paper

Render white or dark background depending on color scheme with shadow, padding and border-radius from theme
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
<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 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 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 React, { useRef } from 'react';
import { Paper } from '@mantine/core';


function Demo() {
  const ref = useRef();
  return <Paper elementRef={ref} />;
}