184 Components
AI Status Badge
MotionLive AI presence pill that communicates real-time processing state — Idle, Thinking, Generating, Done, or Error. Each state transitions with spring animation and a pulsing beacon dot.
ThinkingClick badge to cycle status
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/ai-status-badge.json"
Props
TypeScript props supported by <AIStatusBadge />.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "idle" | "thinking" | "generating" | "done" | "error" | — | Current AI processing state. |
Key Features
- 5 states: idle, thinking, generating, done, error — each with distinct color.
- AnimatePresence spring morph between label text on state change.
- Pulsing beacon dot for active states (thinking, generating).
- CSS variable colors — works in dark and light mode automatically.
- prefers-reduced-motion: static badge without pulse or transitions.
Keyboard & Accessibility
- role='status' + aria-label announces state to screen readers.
- Color is never the sole differentiator — label text always present.