Edit page

Paper

Paper is a basic surface to hold content.

Basic Usage

To implement the Paper component, you need to import it first:

import { Paper } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

  • Paper is designed for non-white background. You may want to either use its raised variant or customize the default appearance to make it stand out on white background.

  • Paper, or Card? Paper is a basic surface to put content on. However, there is also the Card component. While Paper is usually used to hold larger content areas like lists, grids, or forms, Card is designed for displaying items. Card also supports more visual options.

Raised Paper

Add optional shadow to lift the paper above background.

Muted Paper

Dim background and add transparency to visually suppress the Paper.

API

Prop nameTypeDefaultRequiredDescription
childrennodetrue

Content to be placed onto Paper.

idstringundefinedfalse

ID of the root HTML element.

mutedboolfalsefalse

Visually suppress Paper.

raisedboolfalsefalse

Add shadow to pull the Paper above surface.

Theming

Custom PropertyDescription
--rui-Paper__paddingPadding of Paper
--rui-Paper__border-widthBorder width
--rui-Paper__border-colorBorder color
--rui-Paper__border-radiusCorner radius
--rui-Paper__background-colorPaper background color
--rui-Paper--muted__background-colorBackground color of muted paper
--rui-Paper--muted__opacityOpacity of muted paper
--rui-Paper--raised__box-shadowBox shadow of raised paper