UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Progress Item

progress-itemui
Boilerplate repo

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.

Installation

$npx shadcn@latest add https://uipkge.dev/r/react/progress-item.json
Named registry:npx shadcn@latest add @uipkge-react/progress-itemInstalls to:components/ui/progress-item/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
labelstring—required
valuenumber—required
secondaryLabelstring—optional
barClassstring—optional
classNamestring—optional
colorIndexnumber—optional

Includes

progress

Used by

Files installed (2)

  • components/ui/progress-item/ProgressItem.tsx1.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 data-uipkge="" data-slot="progress-item" 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.ts0.1 kB

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