Ring Percentage

Small progress ring with a centered score paired with a short label and caption.

NPSPromoters

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

Import & use

import { Stats6 } from "@/components/beste/piece/stats6";

<Stats6
  value={84}
  label="NPS"
  caption="Promoters"
  tone="emerald"
/>

More Stats pieces

78%

Capacity used

of licensed seats

stats15

A compact card pairing a radial progress ring with its percentage, a label, and a short caption.

1M+Active developersUsing Beste across 140 countries

stats11

Gradient hero card with a huge headline number, uppercase label, and a short context caption.

128KActive usersAcross 42 countries

stats1

Large headline number with an uppercase label and an optional tiny hint line.

Support Queue

1,284312cleared today

420New

610Active

254On hold

stats14

A headline count with a trend note, a tick-segmented progress bar, and a dotted legend breaking the total into stages.

$48.2K

+12.4%vs last month

stats2

Headline value with a signed trend arrow, percentage, and period caption.

#12of 500

Weekly leaderboardTop 3%

stats9

Gold trophy tile beside a #rank-of-total position, a context label, and an emerald percentile flag.