Skeleton
Skeletons provide a structured loading state so content feels intentional while real data is still on the way.
Installation
Add the skeleton component to your project:
Usage
Text Skeleton
Skeleton
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Skeleton
Full preview from the registry iframe.
Loading preview...
Repeated Rows
Skeleton
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Skeleton
Full preview from the registry iframe.
Loading preview...
Card Placeholder
Skeleton
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Skeleton
Full preview from the registry iframe.
Loading preview...
Avatar Placeholder
Skeleton
Live preview rendered from the registry in an isolated iframe.
Loading preview...
Failed to load preview
Skeleton
Full preview from the registry iframe.
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
string |
'default' |
Preset shape such as text, title, avatar, button, card, or image |
rounded |
string |
'md' |
Border radius preset from none to full |
count |
int |
1 |
Number of skeleton items to render |
gap |
string |
'2' |
Gap size between repeated skeleton items |
Example Structure
<div class="space-y-3">
<x-ui.skeleton variant="title" class="w-48" />
<x-ui.skeleton variant="text" :count="3" />
</div>
Usage Notes
- Use skeletons to preserve layout while data loads
- Match the placeholder shape to the final UI structure
- Prefer short loading periods and replace the skeleton as soon as content is ready
Next Steps
- Explore Card component
- Learn about Empty State component
- View Table component