An interactive status monitor with glowing radial reflections, spring-animated status transitions, and staggered character animations for pending, success, and failed states.
pnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-status-badge-glowimport { StatusBadgeGlow, StatusBadgeGlowTable } from '@/components/interactions/status-badge-glow'<StatusBadgeGlow state="success" />
<StatusBadgeGlow state="pending" />
<StatusBadgeGlow state="failed" /><StatusBadgeGlowTable />| Prop | Type | Default | Description |
|---|---|---|---|
state | pending|success|failed | pending | Semantic execution status controlling glow color, icon and label |
labels | Partial<Record<StatusState, string>> | { pending: "Pending", success: "Success", failed: "Failed" } | Custom labels for each state |
onClick | () => void | - | Optional click handler (enables interactive cycling or drilldown) |
className | string | - | Additional class name applied to badge container |
An interactive multi-agent pipeline visualization with real-time physics, event logs, and playback controls.
ViewAn interactive agent status and usage card with segmented progress tracking, live telemetry hours advancement, morph icon controls, squircle buttons, squishmoji status avatar, and a collapsible cost breakdown.
ViewAn interactive currency converter and token swap card with real-time exchange rates, NumberFlow spring animations, Space UI Select with flags, and a liquid metal squircle button.
Viewpnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-status-badge-glow