All components
Rotating Status
Data DisplayA pill that cycles availability statuses beside a pulsing live dot.
Open to ContractOpen to FreelanceOpen to Full-timeOpen to Contract
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/rotating-status.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/rotating-status.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| statuses | string[] | - | Statuses to cycle, in order. |
| interval | number | 1400 | Milliseconds each status stays on screen. |
Accessibility
- The whole cycle is one keyframe animation - no interval, no re-renders.
- Freezes on the first status under prefers-reduced-motion.
- Every status is real text, so the pill reads correctly to assistive tech.
Dependencies
motionclsxtailwind-merge