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 React ->

Installation

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

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

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

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

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

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	optional
`description`	`string`	—	optional
`headerIcon`	`Component`	—	optional
`class`	`string`	—	optional

Includes

section-card progress-item

Files installed (1)

app/components/blocks/ProgressBreakdown.vue0.7 kB

<script lang="ts">
export { ProgressItem } from '@/components/ui/progress-item'
</script>

<script setup lang="ts">
import type { Component } from 'vue'
import { SectionCard } from '@/components/ui/section-card'

defineProps<{
  title?: string
  description?: string
  headerIcon?: Component
  class?: string
}>()
</script>

<template>
  <SectionCard
    data-slot="progress-breakdown"
    :title="title ?? 'Breakdown'"
    :description="description"
    :class="$props.class"
    content-class="space-y-4"
  >
    <template v-if="headerIcon" #header-action>
      <component :is="headerIcon" class="text-muted-foreground size-5" />
    </template>
    <slot />
  </SectionCard>
</template>