ComponentsSpecimen
Surface Scale Stack
Multi-tier stacked surface aggregator block. Composes ordered SurfaceRow specimens into a rounded vertical stack with an optional use-note column.
Preview
Page--surface-page
Root canvas
Screen--surface-screen
Full-bleed section
Card--surface-card
Primary content card
Raised--surface-raised
Elevated card
Overlay--surface-overlay
Modal / sheet
Installation
npx visor add surface-scale-stackThis copies two files into your project:
components/ui/surface-scale-stack/surface-scale-stack.tsx— the componentcomponents/ui/surface-scale-stack/surface-scale-stack.module.css— the styles
SurfaceRow is installed automatically as a dependency.
Usage
import { SurfaceScaleStack } from '@/components/ui/surface-scale-stack/surface-scale-stack';
<SurfaceScaleStack
surfaces={[
{ token: "--surface-page", name: "Page" },
{ token: "--surface-card", name: "Card" },
{ token: "--surface-overlay", name: "Overlay", lightText: true },
]}
/>With use-note labels
The note column only appears when at least one surface item provides a note. Rows without a note render an empty cell.
<SurfaceScaleStack
surfaces={[
{ token: "--surface-page", name: "Page", note: "Root canvas" },
{ token: "--surface-card", name: "Card", note: "Primary content card" },
{ token: "--surface-overlay", name: "Overlay", note: "Modal / sheet", lightText: true },
]}
/>API Reference
SurfaceScaleStackProps
| Prop | Type | Default | Description |
|---|---|---|---|
surfaces* | SurfaceScaleItem[] | — | Ordered array of surface tiers. Each item has token (required), name (required), note (optional), and lightText (optional). |
surfaces[].token* | string | — | CSS custom property for the surface background (e.g. "--surface-page"). |
surfaces[].name* | string | — | Display name for the surface tier. |
surfaces[].note | string | — | Optional use-note shown in the right-aligned column. The note column only renders when at least one surface has a note. |
surfaces[].lightText | boolean | false | When true, text renders in light/inverse colors for dark surfaces. |
className | string | — | Additional CSS class names to merge onto the stack element. |
Accessibility
SurfaceScaleStack is a documentation utility. The component composes SurfaceRow instances with their accessible text labels preserved. Use lightText={true} for dark surfaces to maintain readable contrast on the text labels.