Progress Circle

Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.

68%
Storage used34 GB of 50 GB

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

Import & use
import { Dashboard21 } from "@/components/beste/piece/dashboard21";

<Dashboard21
  label="Storage used"
  value={68}
  caption="34 GB of 50 GB"
  tone="violet"
/>

More Dashboard pieces

View all Dashboard
Sessions
This weekLast week

Compare Lines

dashboard18

Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.

4.6
1,284 reviews
5
980
4
208
3
62
2
24
1
10

Rating Breakdown

dashboard19

Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.

2Critical
6Warning
14Info

Alert Summary

dashboard20

Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.

Weekly sessions
186/ 220
34 to targetmax 300

Bullet Chart

dashboard22

Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.

Traffic by device9,420 sessions
  • Mobile58%
  • Desktop32%
  • Tablet8%
  • Other2%

Stacked Bar

dashboard23

Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.

Last 24hpeak at 14:00
0006121824

Hourly Strip

dashboard24

Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.