Skeleton
A static decorative placeholder for a region's genuine first load.@gemologic/sheen · loadingPlayground
<Skeleton shape="rectangle" style={{ "block-size": "var(--sheen-control-h-lg)" }} shape="text"/>Variant matrix
Cold-load placeholder
shape: text
shape: rectangle
shape: circle
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Skeleton.tsx- Tokens
--sheen-color-bg-subtle--sheen-color-border--sheen-control-radius--sheen-surface-radius--sheen-text-ui-leading--sheen-control-h-lg
Accessibility
Role: decorative, hidden and inertKeyboard: No component-owned keysDo
- Reserve the geometry of the expected content. The app owns the 200ms cold-load delay and a localized loading status for the region.
Do not
- Do not replace loaded content during refresh or navigation with a skeleton.
- Do not put controls or meaningful content inside a skeleton. It is hidden from assistive technology and inert.
- Do not add shimmer, pulse, or mount animation.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
shape | "text" | "rectangle" | "circle" | text | Text line, rectangular region, or circular placeholder. Supply logical dimensions through style for the expected content geometry. |