UIPackage
Vue React

Progress Item

React feedback
Edit on GitHub

Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/progress-item.json

Or with the named registry: npx shadcn@latest add @uipkge-react/progress-item

Examples

Props

Name Type / Values Default Required
label string — required
value number — required
secondaryLabel string — optional
barClass string — optional
className string — optional
colorIndex number — optional

Dependencies

progress

Used by

progress-breakdown

Files (2)

  • components/ui/progress-item/ProgressItem.tsx 1.4 kB 
    import * as React from 'react'
import { cn } from '@/lib/utils'
import { Progress } from '@/components/ui/progress'

export interface ProgressItemProps {
  label: string
  value: number
  secondaryLabel?: string
  barClass?: string
  className?: string
  colorIndex?: number
}

// Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.
const barColors = [
  '[&_[data-slot=progress-indicator]]:bg-primary',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-1)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-2)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-3)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-4)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-5)]',
]

function ProgressItem({ label, value, secondaryLabel, barClass, className, colorIndex }: ProgressItemProps) {
  const colorClass = colorIndex !== undefined ? barColors[colorIndex % barColors.length] : ''

  return (
    <div className={cn('group/progress space-y-1.5', className)}>
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">{label}</span>
        <span className="text-muted-foreground text-xs tabular-nums">{secondaryLabel ?? `${value}%`}</span>
      </div>
      <Progress value={value} className={cn('h-2 transition-colors duration-200', colorClass, barClass)} />
    </div>
  )
}

export { ProgressItem }
  • components/ui/progress-item/index.ts 0.1 kB 
    export { ProgressItem, type ProgressItemProps } from './ProgressItem'

Raw manifest: https://react.uipkge.dev/r/react/progress-item.json