Donut Chart

64%
Capacityof target
About this piece

Donut Chart

Thick donut ring with a centered percent, paired with an uppercase caption on the side.

Usage

The import and the props worth knowing about, in one place.

import { Chart2 } from "@/components/beste/piece/chart2";

<Chart2
  value={64}
  label="Capacity"
  caption="of target"
  tone="success"
/>

More Card pieces

View all Card
  • Direct48%
  • Referral24%
  • Social18%
  • Search10%

Pie Chart

Flat-fill pie beside a legend. Each slice picks a tone from a fixed six-color palette.

Monthly revenue
$12,459+24%

Metric Card

KPI label, a bold value, and a signed percentage trend badge.

Sessions · this week8,214

Bar Chart Card

Card with a label, headline value, and a row of vertical bars scaled to the data.

MRR · 90d$124K

Area Chart

SVG line with a soft gradient fill beneath. Tone colors the stroke and fade.

Starter
$12/ mo
Everything a small team needs to ship.
Up to 5 editors
25 GB asset storage
Weekly analytics email
Community support

Pricing Tier

Standard plan tile with a uppercase name, big price, tagline, four feature bullets, and an outline CTA.

#BES-20481· 3 items
Shipped· Arrives Fri

Order Status

Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.