Glass panels, variants, and composition patterns
Six preset combinations of material, elevation, and chrome
Semi-transparent with blur, visible border, subtle shadow
Nearly invisible - faint bg, minimal border, no shadow
Just an outline - transparent fill, no effects
Floats above page with heavy shadow, more opaque
Strong 2px border, opaque background, structured
Solid colors, 2px border, hard offset shadow
Accent bars, corner treatments, section labels, and barcode overlays
showAccentBarshowGlassAccents (hover)sectionLabel="..."barcodeSurface={...}Parent/child relationships using variant weight for hierarchy
Same surfaces on different backgrounds
Structured content containers with header/content slots
Semi-transparent with subtle border
Just a border, transparent fill
2px border, hard offset shadow
Use variant weight to establish visual hierarchy. Brutalist/editorial for primary, minimal/clean for nested.
Parent padding should be larger than child. Use p-6 for parents, p-4 for children.
Barcode elements and corner accents lock to edges. The brand lives on the perimeter.
import { Surface, GlassPanel } from '@centra/ui';
// Surface is the new API
<Surface variant="brutalist" className="p-4">...</Surface>
// GlassPanel is an alias for backward compatibility
<GlassPanel variant="default" className="p-4">...</GlassPanel>
// Granular control (overrides variant)
<Surface
material="frosted"
elevation="floating"
chrome={{ corners: 'barcode', accent: 'bar' }}
>
...
</Surface>