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

Paper component props

NameTypeDescription
children
ReactNode
Paper children
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
shadow
MantineShadow
Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property
withBorder
boolean
Adds border styles