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

Installation

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

Or with the named registry: npx shadcn-vue@latest add @uipkge/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-vue-next

Files (1)

  • app/components/blocks/ProgressBreakdown.vue 0.9 kB 
    <script setup lang="ts">
import type { Component } from 'vue'
import { SectionCard } from '@/components/ui/section-card'
import { ProgressItem } from '@/components/ui/progress-item'

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

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

<template>
  <SectionCard :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>
    <ProgressItem
      v-for="(item, index) in items"
      :key="item.name"
      :label="item.name"
      :value="item.value"
      :secondary-label="item.secondaryLabel"
      :color-index="index"
    />
  </SectionCard>
</template>

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