Progress Breakdown

blockanalytics

Labeled progress bars in a SectionCard. Spell rows out inline with ProgressItem — each bar takes colorIndex to cycle through chart-1..5 colors.

Also available for Vue ->

Installation

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

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

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

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

Named registry:npx shadcn@latest add @uipkge-react/progress-breakdownInstalls to:components/blocks/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	optional
`description`	`string`	—	optional
`headerIcon`	`LucideIcon`	—	optional
`className`	`string`	—	optional
`children`	`React.ReactNode`	—	optional

npm dependencies

lucide-react

Includes

section-card progress-item

Files installed (1)

components/blocks/ProgressBreakdown.tsx0.8 kB

import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'

export { ProgressItem } from '@/components/ui/progress-item'

export interface ProgressBreakdownProps {
  title?: string
  description?: string
  headerIcon?: LucideIcon
  className?: string
  children?: React.ReactNode
}

export function ProgressBreakdown({
  title,
  description,
  headerIcon: HeaderIcon,
  className,
  children,
}: ProgressBreakdownProps) {
  return (
    <SectionCard
      data-slot="progress-breakdown"
      title={title ?? 'Breakdown'}
      description={description}
      className={className}
      contentClassName="space-y-4"
      headerAction={HeaderIcon ? <HeaderIcon className="text-muted-foreground size-5" /> : undefined}
    >
      {children}
    </SectionCard>
  )
}