Paper

Renders white or dark background depending on color scheme

Import

Usage

Paper is the most basic ui component

Use it to create cards, dropdowns, modals and other components that require background with shadow

Shadow
Radius
import { Text, Paper } from '@mantine/core';

function Demo() {
  return (
    <Paper shadow="xs" p="xl">
      <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 – its default root element is div, but it can be changed to any other element or component with component prop:

import { Paper } from '@mantine/core';

function Demo() {
  return <Paper component="button" />;
}

You can also use components in component prop, for example, Next.js Link:

import Link from 'next/link';
import { Paper } from '@mantine/core';

function Demo() {
  return <Paper component={Link} href="/" />;
}

Polymorphic components with TypeScript

Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, PaperProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:

import type { PaperProps, ElementProps } from '@mantine/core';

interface MyPaperProps extends PaperProps,
  ElementProps<'button', keyof PaperProps> {}

If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.