Progress rings

Radial gauge cards above a segmented breakdown bar.

Usage

import { StatsProgressRings } from '@/components/blocks/stats-03'


<StatsProgressRings />


// Bring your own numbers
<StatsProgressRings
  heading="How the quarter went"
  gauges={[
    { label: 'On-time delivery', value: 94, caption: 'of orders arrived when promised.' },
    { label: 'Repeat buyers', value: 41, caption: 'of customers ordered again.', delta: { value: '+3 pts' } },
  ]}
  breakdown={{
    label: 'Orders by channel',
    segments: [
      { label: 'Web', value: 62 },
      { label: 'App', value: 30 },
      { label: 'Other', value: 8, tone: 'neutral' },
    ],
  }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/stats-03

npx shadcn@latest add @pastaui-pro/stats-03

yarn dlx shadcn@latest add @pastaui-pro/stats-03

bunx --bun shadcn@latest add @pastaui-pro/stats-03

Source

Props

Progress rings props
Prop	Type	Default	Description
eyebrow	string	= 'September energy report'	Small label above the heading.
heading	string	= Sample heading	Section heading, rendered as an h2.
description	string	= Sample description	Muted supporting text beside the heading.
gauges	StatsRingGauge[]	= Three sample gauges	Each gauge takes a label, a value from 0 to 100, a caption and an optional delta ({ value, tone: positive \| negative }).
breakdown	StatsRingBreakdown	= Four sample segments	A label, optional total and totalLabel, and segments ({ label, value, detail?, tone?: deep \| mid \| light \| neutral }). Tones default to blue shades by position, with neutral from the fourth segment on.
className	string	= undefined	Extra classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.