XP Level Bar

Level 121840 / 2500 XP
About this piece

XP Level Bar

Trophy tile beside a level badge and an XP fraction over a sunset gradient fill bar.

Usage

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

import { Progress14 } from "@/components/beste/piece/progress14";

<Progress14
  level={12}
  current={1840}
  next={2500}
  tone="emerald"
/>

More Progress pieces

View all Progress
Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%

Stacked Bar

Single horizontal bar divided into tinted segments by percentage, with a legend row below.

Deployment68%

Linear Progress

Labelled progress bar with a percent readout above and a tonal fill.

5
68%
4
22%
3
6%
2
3%
1
1%

Rating Distribution

Five stacked rows mapping 5–1 stars to amber fill bars and the percentage for each tier.

27Day streak
Longest: 42 days

Streak Counter

Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.

72%

Progress Ring

Circular SVG ring with a centered percentage. Tone sets the stroke color.

Storage used
0%
82 GB of 100 GB, upgrade before Friday

Ring Fill

Circular progress ring that draws itself from zero to the target on mount while the centre percentage counts up in step, then holds.