Paper

Layout

Elevated surface card with border and bg-elevated background.

Surface container for cards, panels, and sections. tier controls background elevation: surface, raised, recessed, outline. Optional header and footer slots add Space Mono ALL-CAPS headers and divider-separated footers.

Usage

import { Paper } from "nosible-ux"

export default function Example() {
  return (
    <Paper tier="raised" padding="md" header="Signal summary">
      Summary content
    </Paper>
  )
}

Examples

All tiers

Surface

Raised

Recessed

Outline

With header and footer

Signal details

AAPL earnings beat consensus by 5.1%. Signal confidence: 92%.

Props

Name	Type	Default	Description
`asChild`	`boolean \| undefined`	—	When true, merges Paper styles onto the child element instead of rendering a `<div>`.
`footer`	`ReactNode`	—	Optional footer rendered after a slate-3 divider at the bottom.
`header`	`ReactNode`	—	Optional header rendered in Space Mono uppercase with a slate-3 divider below it.
`padding`	`"none" \| "sm" \| "md" \| "lg" \| null \| undefined`	—
`tier`	`"outline" \| "raised" \| "surface" \| "recessed" \| null \| undefined`	—

← All Components Getting Started →