UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Progress Item

progress-itemui
Boilerplate repo

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.

Installation

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/progress-item.json
Named registry:npx shadcn-vue@latest add @uipkge/progress-itemInstalls to:app/components/ui/progress-item/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
labelstring—required
valuenumber—required
secondaryLabelstring—optional
barClassstring—optional
classstring—optional
colorIndexnumber—optional

Includes

progress

Used by

Files installed (2)

  • app/components/ui/progress-item/ProgressItem.vue1.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 data-uipkge data-slot="progress-item" :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.ts0.1 kB

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