build69
build69  /  Components  /  Layout & Surfaces  /  Paper

Paper

v1.0.1Updated 20 Jul 2026

Surface primitive: elevation 0-5, outlined / inset / tinted variants, hoverable lift. The cheapest framing layer above raw <div>.

Preview

Live · 8 stories
Elevation LadderOpen ↗
Why this is recommendedpapersurfaceelevationpanel+3

Paper — elevation ladder.

Recommended for+14
  • Generic surfaces
  • Background framing
  • Section grouping without full Card structure
Tags+6
papersurfaceelevationpanelmuilayoutladder
Features+4
  • Elevation 0-5 shadows
  • Outlined / inset / tinted variants
  • Hoverable lift
  • Rounded variants
  • Tonal tint
Not recommended for−2
  • Cards with header / footer / actions (use Card)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Paper" })

Usage

import { Paper } from '@/components/surfaces/paper';

<Paper elevation={2} className="p-6"></Paper>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
elevation

Shadow elevation

0 | 1 | 2 | 3 | 4 | 5
variant

Visual style

'default' | 'outlined' | 'inset' | 'tinted'
hoverable

Lift on hover

boolean

Related