UIPackage
Vue React

Progress Item

Vue feedback
Edit on GitHub

Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.

Also available for React ->

Installation

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

Or with the named registry: npx shadcn-vue@latest add @uipkge/progress-item

Examples

Props

Name Type / Values Default Required
label string — required
value number — required
secondaryLabel string — optional
barClass string — optional
class string — optional
colorIndex number — optional

Dependencies

progress

Used by

progress-breakdown

Files (2)

  • app/components/ui/progress-item/ProgressItem.vue 1.3 kB 
    <script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { Progress } from '@/components/ui/progress'

const props = defineProps<{
  label: string
  value: number
  secondaryLabel?: string
  barClass?: string
  class?: string
  colorIndex?: number
}>()

// Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.
const barColors = [
  '[&_[data-slot=progress-indicator]]:bg-primary',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-1)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-2)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-3)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-4)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-5)]',
]

const colorClass = computed(() =>
  props.colorIndex !== undefined ? barColors[props.colorIndex % barColors.length] : '',
)
</script>

<template>
  <div :class="cn('group/progress space-y-1.5', props.class)">
    <div class="flex items-center justify-between text-sm">
      <span class="font-medium">{{ label }}</span>
      <span class="text-muted-foreground text-xs tabular-nums">{{ secondaryLabel ?? `${value}%` }}</span>
    </div>
    <Progress :model-value="value" :class="cn('h-2 transition-colors duration-200', colorClass, barClass)" />
  </div>
</template>
  • app/components/ui/progress-item/index.ts 0.1 kB 
    export { default as ProgressItem } from './ProgressItem.vue'

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