Paper

Usage

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.