Environment Badge

Pill that names the deploy environment with a matching dot color and an optional mono branch suffix.

Stagingfeat/onboarding-v3

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Indicator11 } from "@/components/beste/piece/indicator11";

<Indicator11
  env="staging"
  branch="feat/onboarding-v3"
/>

More Indicator pieces

View all Indicator
Live

Status Pill

indicator1

Pulsing status dot in four tints: live, beta, paused, offline.

Syncing workspace

Spinner Pill

indicator3

Spinning loader icon paired with a status label inside a rounded pill.

Only 4 left

Stock Level

indicator12

Stock status chip with a dot and auto-phrased copy across in-stock, low, out, and preorder states.

System status

SchedulingOperational
Billing syncOperational
Records exportDegraded

Status List Card

indicator13

A compact status panel listing services, each with a colored dot and an operational state.

42%

Battery Level

indicator4

Battery glyph with a tinted fill that colors rose, amber, or emerald by level.

Updated 3 seconds ago

Freshness Dot

indicator9

Timestamp indicator with a dot that pings when live, holds sky when recent, or glows amber when stale.