1 viewer
Component · Feedback
Skeleton
Loading-state placeholder that mimics the shape of content.
- Category
- Feedback
- Slots
- 2
- States
- 0
- Writer
- Shared
Preview
<Skeleton lines={4} />Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-skeleton |
| line | .primitive-skeleton__line |
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
Skeleton placeholders stay out of the accessibility tree so loading state is announced by surrounding status copy, not decorative lines.
- Render skeleton lines with aria-hidden so assistive technology ignores placeholder geometry.
- Pair loading placeholders with visible or programmatic status text when users need loading context.