Paper

The Paper component provides an elevated surface for displaying content. It mimics the behavior of real-world surfaces with shadow effects, supporting Material Design's elevation system.

Basic Example

Here's a simple example of a Paper component with default elevation. This creates a surface with a subtle shadow.

Default Paper with Elevation 1

Show Code

Elevation Example

The elevation prop controls the shadow depth. Use values from 0 to 24 to create varying levels of elevation:

Elevation 0 (No shadow)

Elevation 3

Elevation 8

Show Code

Variant Example

The Paper component supports two variants: elevation (default) and outlined. The outlined variant removes shadows and adds a border instead:

Elevation Variant (Default)

Outlined Variant (No shadow)

Show Code

Square and Rounded Corners

By default, the Paper component has rounded corners. You can make it square by setting the square prop to true.

Rounded Corners (Default)

Square Corners

Show Code

Layer5 is the steward of Meshery and creator of Kanvas, the collaborative canvas for cloud-native infrastructure. We bridge the gap between design and operation, allowing engineers to create, configure, and deploy orchestratable diagrams in real time. Whether managing Kubernetes or multi-cloud environments, Layer5 provides the tooling needed to oversee modern infrastructure with confidence.

Paper

Table of Contents

Paper

Basic Example

Elevation Example

Variant Example

Square and Rounded Corners

RESOURCES

COMMUNITY

SOLUTIONS

COMPANY