Progress

progress ui

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

Also available for Vue ->

Installation

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

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

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

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

Named registry: npx shadcn@latest add @uipkge-react/progress Installs to: components/ui/progress/

Examples

Loading interactive previews…

npm dependencies

@radix-ui/react-progress

Used by

progress-item

Files installed (2)

components/ui/progress/Progress.tsx 1.1 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) => {
  // Clamp so out-of-range value cannot push the indicator past the track.
  const clamped = Math.min(100, Math.max(0, value ?? 0))
  return (
    <ProgressPrimitive.Root
      ref={ref}
      data-uipkge=""
      data-slot="progress"
      value={clamped}
      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-transform duration-500 ease-out motion-reduce:transition-none"
        style={{ transform: `translateX(-${100 - clamped}%)` }}
      />
    </ProgressPrimitive.Root>
  )
})
Progress.displayName = 'Progress'

export { Progress }

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

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

Change language