Status Dot

A small live indicator with a pulsing halo, in four tones.

  • All systems operational
  • Degraded performance
  • Partial outage
  • Maintenance scheduled

Installation#

pnpm dlx shadcn@latest add @balick/status-dot

Or pass the full URL: https://ui.balick.me/r/status-dot.json

Usage#

import { StatusDot } from "@/components/ui/status-dot"

export function Status() {
  return (
    <p className="flex items-center gap-2 text-sm">
      <StatusDot />
      All systems operational
    </p>
  )
}

Props#

PropTypeDefault
tone

Colour of the dot.

"success" | "warning" | "danger" | "neutral""success"
pulse

Draw an expanding halo. It stops under reduced motion.

booleantrue
className

Size the dot with size-* utilities (size-2 by default).

string—