Component

Progress Display

Stats grid, progress bar, and badge display components for dashboards and data visualization. Uses the headless @refraction-ui/progress-display core.

Examples

Stats cards, progress bars with sizes, and achievement badges.

Stats Grid

1,234

Users

$12.4k

Revenue

Errors

Progress Bars

Badge Display

🌟Early Adopter

🏆Top Contributor

🧪Beta TesterLocked

Installation

$pnpm add @refraction-ui/react-progress-display

Usage

tsx

import { StatsGrid, ProgressBar, BadgeDisplay } from '@refraction-ui/react-progress-display'

export function Dashboard() {
  return (
    <div>
      <StatsGrid stats={[{ label: 'Users', value: '1,234', color: 'primary' }]} />
      <ProgressBar value={75} />
      <BadgeDisplay badges={[{ name: 'Pioneer', icon: '🌟', isUnlocked: true }]} />
    </div>
  )
}

Props

Prop	Type	Default	Description
`stats (StatsGrid)`	`StatCardData[]`	--	Array of { label, value, color?, icon? }.
`value (ProgressBar)`	`number`	--	Current progress value.
`max (ProgressBar)`	`number`	`100`	Maximum value.
`size (ProgressBar)`	`'sm' \| 'md' \| 'lg'`	--	Size of the progress bar.
`badges (BadgeDisplay)`	`BadgeData[]`	--	Array of { name, icon, isUnlocked }.