Docs
Progress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

DocsAPI Reference

🚧 Under development

Installation

Copy and paste the following code into your project.

"use client"
 
import * as React from "react"
import { Progress as ProgressPrimitive } from "@base-ui-components/react/progress"
 
import { cn } from "@/lib/utils"
 
const Progress = ProgressPrimitive.Root
 
const ProgressTrack = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Track>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Track>
>(({ className, ...props }, ref) => (
  <ProgressPrimitive.Track
    ref={ref}
    className={cn(
      "block h-2 w-full overflow-hidden rounded-full bg-secondary",
      className,
    )}
    {...props}
  />
))
ProgressTrack.displayName = ProgressPrimitive.Track.displayName
 
const ProgressIndicator = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <ProgressPrimitive.Indicator
    ref={ref}
    className={cn("block bg-primary transition-all duration-500", className)}
    {...props}
  />
))
ProgressIndicator.displayName = ProgressPrimitive.Indicator.displayName
 
export { Progress, ProgressTrack, ProgressIndicator }

Update the import paths to match your project setup.

Usage

import {
  Progress,
  ProgressTrack,
  ProgressIndicator,
} from "@/components/ui/progress"
<Progress value={33}>
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>
Preview CardRadio