Surface

A layered container with configurable elevation, border radius, and glassmorphism blur for building depth in your interfaces.

Basic

Four elevation levels from flat to prominent shadow.

Four border radius presets.

Surfaces work great as dashboard metric cards with gradient icons.

Surfaces can be nested for layered depth effects.

Prop	Type	Default	Description
`elevation`	`"none" \| "sm" \| "md" \| "lg"`	`"none"`	Shadow depth level.
`rounded`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	Border radius size.
`bordered`	`boolean`	`false`	Adds a visible border with hover effect.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

elevation"none"

"none" | "sm" | "md" | "lg"

Shadow depth level.

rounded"md"

"none" | "sm" | "md" | "lg"

Border radius size.

borderedfalse

boolean

Adds a visible border with hover effect.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}