All components
Pulse Dot
Data DisplayA status dot with a pulsing halo.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/pulse-dot.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/pulse-dot.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "bg-emerald-500" | Tailwind background class for the dot. |
Accessibility
- Decorative - pair it with a text label naming the status.
- Colour is configurable, so it can carry different states.
- Uses a CSS animation, so it costs no JavaScript.
Dependencies
clsxtailwind-merge