184 Components
Spring Badge Pill
ButtonsKinetic notification and status pill featuring spring count increment hops, breathing radar beacon dots, and fluid exit transitions.
Updates
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/spring-badge-pill.json"
Props
TypeScript props supported by <SpringBadgePill />.
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | Optional metric number that animates on change. |
| label | string | "Updates" | Descriptive label inside the pill. |
| variant | "default" | "success" | "warning" | "danger" | "outline" | "default" | Color theme and visual intent of the badge. |
| pulseBeacon | boolean | true | Shows radiating pulse indicator dot. |
| dismissible | boolean | false | Shows close button with spring dismiss physics. |
| onDismiss | () => void | — | Callback fired when the badge is dismissed. |
Key Features
- Spring-driven count bump animations whenever numeric values change.
- Integrated live radar beacon dot with pulsating radio waves.
- Optional interactive dismissal with spring exit scale collapse.
- Multiple status presets: default, success, warning, danger, and monochrome outline.
Keyboard & Accessibility
- Announces count changes using semantic HTML markup.
- Focusable dismissal button with proper aria-label.
- Respects prefers-reduced-motion by bypassing positional hops.