Atoms

StatusDot

Always green, even when it's not.

A pulsing colored dot, the universal 'we're live' indicator. Drop into pills, navs, statuses.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/status-dot.json

Examples

Default green
All systems normal
<StatusDot /> All systems normal
Warn (custom color)
Degraded performance
<StatusDot color="#fbbf24" /> Degraded performance

Props

PropTypeDefaultDescription
colorstringvar(--pui-success)CSS color.
staticboolean-Disable the pulse.
Next Button ]