Browse components
Status
Presence indicator (online, away, busy, offline): a colored dot with rippling rings, an optional tinted pill and a soft crossfade when the status changes.
Installation
npx shadcn@latest add @glint-ui/statusFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/status.json
Usage
import { Status } from "@/components/ui/status";
<Status status="online" />
<Status status="busy" label="In a meeting" variant="plain" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "online" | "away" | "busy" | "offline" | "online" | Presence state. |
| variant | "pill" | "plain" | "pill" | Tinted capsule or dot + text. |
| size | "sm" | "md" | "md" | Text and dot size. |
| label | string | — | Custom text (defaults to the status name). |
| hideLabel | boolean | false | Dot only; label kept for screen readers. |
| pulse | boolean | — | Ripple rings. Defaults to on for online and busy. |
| className | string | — | Extra classes for the root element. |