Components

Progress

A component that displays the progress of an operation.

example.tsx

Import

tsx

import { AppProgress } from "@/components/primitives/AppProgress"

Label

Pair AppProgress with a label row above it to communicate status and the current value to the user.

example.tsx

Uploading…66%

Controlled

Drive the value prop from state to reflect real-time progress — for example, a file upload or a multi-step form.

example.tsx

Progress33%

API Reference

AppProgress extends all native <div> HTML attributes.

Prop	Type	Default	Description
value	number	—	The value of the progress indicator.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppProgress.tsx

"use client"

import { Progress } from "../ui/progress"

type AppProgressProps = React.ComponentPropsWithoutRef<typeof Progress>

function AppProgress(props: AppProgressProps) {
  return <Progress {...props} />
}

export { AppProgress }