Skip to Content

status-indicator

ui

A status dot with optional label indicating online, offline, busy, away, or live states.

Use cases

  • User online/offline status
  • Service health indicators
  • Live event indicators
  • Device connection status

Features

  • Five status types: online, offline, busy, away, live
  • Pulse animation for live/online states
  • Mineral-colored dots (malachite for online, gold for away)
  • Three sizes (sm, md, lg)
  • Optional label text

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

Online
Away
Busy
Offline

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/status-indicator

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/status-indicator

Source

components/ui/status-indicator.tsx