UIPackage
Menu

Framework

VueReact

Change language

Boilerplate 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.

Also available for React ->

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