Trend Delta

Inline percent change with a directional arrow, green for up and rose for down, beside a compare period.

+12.4%vs last week

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

Import & use
import { Indicator8 } from "@/components/beste/piece/indicator8";

<Indicator8
  direction="up"
  value="+12.4%"
  period="vs last week"
/>

More Indicator pieces

View all Indicator
3 / 5

Step Dots

indicator2

Row of small dots showing progress through N steps, with a trailing fraction count.

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.

Only 4 left

Stock Level

indicator12

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

42%

Battery Level

indicator4

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

5G

Signal Bars

indicator5

Stair-step signal bars with an optional network label like 5G or Wi-Fi.