Progress Item

progress-item ui

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

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

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

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

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

Named registry: npx shadcn-vue@latest add @uipkge/progress-item Installs to: app/components/ui/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

Includes

progress

Used by

progress-breakdown

Files installed (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