Skeleton

A placeholder loading element that mimics the shape of content while it loads.

Basic

Prop	Type	Default	Description
`width`	`string \| number`	`"100%"`	Width of the skeleton element.
`height`	`string \| number`	`"20px"`	Height of the skeleton element.
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`	`"sm"`	Border radius.
`animate`	`boolean`	`true`	Whether the skeleton shows a loading animation.
`--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" }}

width"100%"

string | number

Width of the skeleton element.

height"20px"

string | number

Height of the skeleton element.

rounded"sm"

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

Border radius.

animatetrue

boolean

Whether the skeleton shows a loading animation.

--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" }}