Skip to content
+

Paper

The Paper component is a container for displaying content on an elevated surface.

  • Feedback
  • Bundle size
  • Material Design
  • Figma
  • Adobe
  • Sketch

Introduction

In Material Design, surface components and shadow styles are heavily influenced by their real-world physical counterparts.

Material UI implements this concept with the Paper component, a container-like surface that features the elevation prop for pulling box-shadow values from the theme.

Press Enter to start editing

Component

import Paper from '@mui/material/Paper';

Customization

Elevation

Use the elevation prop to establish hierarchy through the use of shadows. The Paper component's default elevation level is 1. The prop accepts values from 0 to 24. The higher the number, the further away the Paper appears to be from its background.

In dark mode, increasing the elevation also makes the background color lighter. This is done by applying a semi-transparent gradient with the background-image CSS property.

elevation=0
elevation=1
elevation=2
elevation=3
elevation=4
elevation=6
elevation=8
elevation=12
elevation=16
elevation=24
elevation=0
elevation=1
elevation=2
elevation=3
elevation=4
elevation=6
elevation=8
elevation=12
elevation=16
elevation=24

Variants

Set the variant prop to "outlined" for a flat, outlined Paper with no shadows:

default variant
outlined variant
Press Enter to start editing

Corners

The Paper component features rounded corners by default. Add the square prop for square corners:

rounded corners
square corners
Press Enter to start editing

Anatomy

The Paper component is composed of a single root <div> that wraps around its contents:

<div class="MuiPaper-root">
  <!-- Paper contents -->
</div>

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Edit this page

Was this page helpful?


CardBottom Navigation

Blog

Store