Paperpolymorphic

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
Shadow
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Padding
xs
sm
md
lg
xl
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>
);
}

Polymorphic component

Paper is a polymorphic component, you can change root element:

import { Paper } from '@mantine/core';
function Demo() {
return (
<Paper component="a" href="https://mantine.dev/core/">
Anchor element
</Paper>
);
}

Get ref

import { useRef } from 'react';
import { Paper } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLDivElement>(null);
return <Paper ref={ref} />;
}
Download more icon variants from https://tabler-icons.io/i/search

Paper component props

NameTypeDescription
children
ReactNode
Paper children
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined border-radius value from theme.radius or number for border-radius in px
shadow
MantineShadow
Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property
withBorder
boolean
Adds 1px border with theme.colors.gray[3] color in light color scheme and theme.colors.dark[4] in dark color scheme