Skeleton
A shimmer placeholder that mirrors the shape of content before it arrives, reducing perceived wait time and layout shift. Use it when content is loading asynchronously and the layout is known in advance.
Default
Full-width rectangle with shimmer animation. Default height from layout tokens, override via className.
Shapes
Three presets control radius and default dimensions. All shapes have visible defaults — override via className.
Sizes
Three sizes match your content hierarchy. sm for captions, md for body text (default), lg for headings.
Static (No Animation)
Disable the shimmer with animated={false}. Useful for snapshot tests or reduced motion overrides.
Card Skeleton
Compose skeletons to approximate a card layout. Wrap in role="status" for screen reader feedback.
List Item Skeleton
Avatar + text lines pattern for list items.