Surface Row

Surface background variant display showing a surface token with its name and token reference.

Preview

Page--surface-page

Card--surface-card

Raised--surface-raised

Overlay--surface-overlay

Installation

npx visor add surface-row

This copies two files into your project:

components/ui/surface-row/surface-row.tsx — the component
components/ui/surface-row/surface-row.module.css — the styles

Usage

import { SurfaceRow } from '@/components/ui/surface-row/surface-row';

<SurfaceRow token="--surface-page" name="Page" />
<SurfaceRow token="--surface-card" name="Card" />
<SurfaceRow token="--surface-overlay" name="Overlay" lightText />

API Reference

SurfaceRowProps

Prop	Type	Default	Description
`token`*	`string`	—	CSS custom property for the surface background (e.g. "--surface-card").
`name`*	`string`	—	Display name for the surface.
`lightText`	`boolean`	`false`	When true, text renders in light/inverse colors for dark surfaces.
`className`	`string`	—	Additional CSS class names to merge onto the element.

SurfaceRow is a documentation utility. Use lightText={true} for dark surfaces to maintain readable contrast on the text labels. Each row includes both a human-readable name and the token name — visual background is supplemented by text for non-visual access.