DrylSkeleton
AI-aware
AI-native content placeholder. While data loads, skeleton blocks communicate
what shape the content will take. In AI workflows,
AiState.Streaming shifts the shimmer to a violet-cyan gradient —
a visual signal that the model is actively writing into these placeholder blocks.
Variants
Line
Text (4 lines)
Avatar
Image
Card
Sizes
Small
Medium (default)
Large
AI Mode
Skeleton blocks respond to the same AiState lifecycle. Streaming shifts the shimmer to a violet-cyan gradient.
AI lifecycle — live simulation
None → Thinking → Streaming → Generated → None. The skeleton fades out on Generated, then real content rises into place.
Card and Avatar with AI mode
Card — Streaming
Card — Thinking
Image — Streaming
Avatar — Thinking
Custom layout
Use Variant="Custom" with ChildContent to compose skeleton layouts that match any design.
Dashboard row — Streaming
Profile row — Active