UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Progress Breakdown

blockanalytics
Boilerplate repo

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

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/progress-breakdown.json
Manifest:https://uipkge.dev/r/svelte/progress-breakdown.jsonInstalls to:src/lib/components/blocks/progress-breakdown/

Variants

Loading interactive previews…

Files installed (1)

  • src/lib/components/blocks/progress-breakdown/ProgressBreakdown.svelte0.8 kB
    <script lang="ts" module>
  import type { Component, Snippet } from 'svelte'

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

  export interface ProgressBreakdownProps {
    title?: string
    description?: string
    headerIcon?: Component
    class?: string
    children?: Snippet
  }
</script>

<script lang="ts">
  import { SectionCard } from '$lib/components/ui/section-card'

  let { title = 'Breakdown', description, headerIcon, class: className, children }: ProgressBreakdownProps = $props()
</script>

<SectionCard
  data-slot="progress-breakdown"
  {title}
  {description}
  class={className}
  contentClass="space-y-4"
>
  {#snippet headerAction()}
    {#if headerIcon}
      {@const Icon = headerIcon}
      <Icon class="text-muted-foreground size-5" />
    {/if}
  {/snippet}
  {@render children?.()}
</SectionCard>

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