Mini Dashboard

2x2 grid of stat cells inside one card, separated by a thin cross divider.

$48KRevenue
2,340Orders
12.4%Conversion
6:42Avg session

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

Import & use
import { Stats8 } from "@/components/beste/piece/stats8";

<Stats8
  cells={[
    {
      "value": "$48K",
      "label": "Revenue"
    },
    {
      "value": "2,340",
      "label": "Orders"
    },
    {
      "value": "12.4%",
      "label": "Conversion"
    },
    {
      "value": "6:42",
      "label": "Avg session"
    }
  ]}
/>

More Stats pieces

View all Stats
128KUsers
4.2MEvents
99.98%Uptime

Triple Stat Grid

stats3

Three stats side by side inside one card, separated by vertical dividers.

#12of 500
Weekly leaderboardTop 3%

Rank Card

stats9

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

2.8×Faster than last quarter

Icon Stat Tile

stats7

Colored icon tile beside a bold stat and a one-line description.

1M+Active developersUsing Beste across 140 countries

Milestone

stats11

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

128KActive usersAcross 42 countries

Big Stat

stats1

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

78%

Capacity used

of licensed seats

Radial Capacity Ring

stats15

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