Loading navigation…
User
API and Development
Skeleton displays placeholder content with animated loading effects while actual content is being loaded. Skeletons provide visual feedback that content is loading and help maintain layout stability during data fetching. It provides animated loading placeholders built on Radix UI's Skeleton component, ensuring consistent loading states across the interface. Skeletons support preset styles for common content types and custom dimensions for flexible layouts, with full accessibility support through proper ARIA labels.
| Name | Default | Description |
|---|---|---|
children | Custom content to display as skeleton placeholder. When provided, the skeleton matches the dimensions of the content. | |
preset | Preset style for common content types. Options: TextLine, Paragraph. | |
width | Custom width for the skeleton (e.g., "200px", "50%", "20rem"). | |
height | Custom height for the skeleton (e.g., "100px", "2rem"). | |
loading | Whether the skeleton is in loading state. Presets automatically set this to true. | |
label | Accessible label for the skeleton. Defaults to a localized "Loading content" message. |
Use for simple loading placeholders with custom content.
Use for single-line text placeholders.
The text line preset displays a skeleton with a fixed height suitable for a single line of text.
Use for multi-line paragraph placeholders.
The paragraph preset displays a skeleton sized appropriately for paragraph content.
Specify custom width and height for precise layout control.
Build complete loading states using multiple skeletons.
Create skeleton placeholders for card components.
Use skeletons for loading list items.
Create skeletons for form fields while data loads.
Combine presets and custom skeletons for complex layouts.
Provide custom accessible labels for better context.