UIPackage
Vue React

Progress Breakdown

block dashboard
Edit on GitHub

Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.

Also available for Vue ->

Installation

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

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

Examples

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

BreakdownItem 
interface BreakdownItem {
  name: string
  value: number
  secondaryLabel?: string
}

npm dependencies

lucide-react

Files (1)

  • components/blocks/ProgressBreakdown.tsx 1.1 kB 
    import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'
import { ProgressItem } from '@/components/ui/progress-item'

interface BreakdownItem {
  name: string
  value: number
  secondaryLabel?: string
}

export interface ProgressBreakdownProps {
  title?: string
  description?: string
  items: BreakdownItem[]
  headerIcon?: LucideIcon
  className?: string
}

export function ProgressBreakdown({ title, description, items, headerIcon: HeaderIcon, className }: ProgressBreakdownProps) {
  return (
    <SectionCard
      title={title ?? 'Breakdown'}
      description={description}
      className={className}
      contentClassName="space-y-4"
      headerAction={HeaderIcon ? <HeaderIcon className="text-muted-foreground size-5" /> : undefined}
    >
      {items.map((item, index) => (
        <ProgressItem
          key={item.name}
          label={item.name}
          value={item.value}
          secondaryLabel={item.secondaryLabel}
          colorIndex={index}
        />
      ))}
    </SectionCard>
  )
}

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