UI Component Showcase
Panel
Header content example
Header Badge
Panels wrap related content with a consistent shell. Mix in other UI primitives below to see spacing and typography pairings.
Inline Stats
Metric highlights
Critical success 198%
Warning threshold 272%
Error rate 312
Neutral metric 4187
Critical success 598%
Warning threshold 672%
Error rate 712
Neutral metric 8187
Status Badges
Tone variations
NeutralInfoSuccessWarningError
Pills
Compact context chips
NeutralInfoSuccessWarningError
Card List Item
Structured rows
Engine cluster
Primary 路 online
Demonstrates a list item with supporting text and a badge adornment.
HealthyTelemetry feed
Last update 路 4m ago
You can pass children to show richer detail beneath the title.
Lagging
Info Fields
Read-only fields
Theme
Dark
Deployment
Production
Owner
Ops Team
Last Sync
2024-02-19 10:32 UTC