Battery Level

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

42%

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

Import & use
import { Indicator4 } from "@/components/beste/piece/indicator4";

<Indicator4
  level={42}
  charging={true}
  tone="emerald"
/>

More Indicator pieces

View all Indicator
Only 4 left

Stock Level

indicator12

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

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.

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.

Stagingfeat/onboarding-v3

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

5GGood

Signal Bars

indicator10

Four ascending bars that fill with the current reception level, paired with a network name and label.