UIPackage
Vue React

Progress

React feedback
Edit on GitHub

Linear progress bar — determinate or indeterminate. Two visual densities (slim, default), four tones, and an optional inline percentage label.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/progress.json

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

Examples

Dependencies

@radix-ui/react-progress

Used by

progress-item

Files (2)

  • components/ui/progress/Progress.tsx 0.9 kB 
    'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'
import { cn } from '@/lib/utils'

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="progress"
    value={value}
    className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      data-uipkge=""
      data-slot="progress-indicator"
      className="bg-primary h-full w-full flex-1 transition-colors duration-200"
      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = 'Progress'

export { Progress }
  • components/ui/progress/index.ts 0 kB 
    export { Progress } from './Progress'

Raw manifest: https://react.uipkge.dev/r/react/progress.json