127+ Primitives
Agent Status Badge
MotionDynamic AI agent status badge featuring an interactive 4x4 dot matrix indicator with distinct micro-animations for reading docs, analyzing, debugging, and success states.
AI AgentInteractiveMicro-AnimationsA11y Ready
Analyzing
All 4 Matrix Animations
Reading docs
Analyzing
Debugging
Success
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/agent-status-badge.json"
Props
TypeScript props supported by <AgentStatusBadge />.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "reading-docs" | "analyzing" | "debugging" | "success" | "reading-docs" | Active AI workflow status controlling matrix animations, color theme, and text. |
| label | ReactNode | undefined | Custom label text override replacing the default status message. |
| size | "sm" | "md" | "lg" | "md" | Size dimensions of the badge pill and 4x4 dot matrix. |
| variant | "default" | "outline" | "ghost" | "glass" | "default" | Visual appearance style for container background and borders. |
| glow | boolean | true | Whether to project a subtle ambient glow matching the active status color. |
| showGrid | boolean | true | Whether to render the animated 4x4 dot matrix to the left of the text. |
| interactive | boolean | false | Enables click and keyboard interaction to cycle through agent statuses. |
| onStatusChange | (status: AgentStatus) => void | undefined | Callback function fired whenever the status is changed via interaction. |
| className | string | undefined | Additional Tailwind CSS classes merged into the root element. |
Key Features
- 4x4 animated dot matrix with dedicated kinetic signatures for reading docs (raster scan), analyzing (radial ripple), debugging (radar locator probe), and success (checkmark draw).
- Cohesive color-coded themes with subtle ambient glow and micro-borders for Sky, Violet, Amber, and Emerald statuses.
- Smooth text morphing with Framer Motion AnimatePresence transitions when status changes.
- Interactive cycle mode allowing users to click or press keyboard shortcuts to toggle through states.
- Standalone AgentDotGrid subcomponent exportable for custom embedding anywhere in AI dashboards.
Keyboard & Accessibility
- Includes semantic aria-live='polite' and role='status' (or role='button' when interactive) for assistive technologies.
- Full keyboard navigation with Enter and Space key activation when interactive mode is enabled.
- Automatically respects prefers-reduced-motion by replacing continuous loops with static high-contrast dot patterns.