ReactProgress
A determinate or indeterminate progress bar with a label.
Give your AI assistant this page as context.
Connect your library with MCPui/progressUsage
Get this component from a saved library export or the connected CLI. The imports below refer to local files installed in your app.
Import styles/components.css, then styles/theme.css once. Wrap your app in ThemeScope from components/ui/utils so typography, focus and overlays share the theme. The installation guide covers runtime dependencies and React/Next.js setup.
import { Progress } from './components/ui/progress';
<Progress label="Upload progress" value={65}/>Design system
This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in Export.
Behavior and accessibility
- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.
Status: experimental during early access. Sample previews do not send emails, process payments or upload files to a service.
Source and props
This is the exported source, using the same implementation as the editor.
"use client";
import type { ComponentProps } from "react";
import { Progress as Base } from "@base-ui/react/progress";
export function Progress({
label,
value,
max = 100,
locale = "en-US",
}: {
label: string;
value: number | null;
max?: number;
locale?: ComponentProps<typeof Base.Root>["locale"];
}) {
return (
<Base.Root
value={value}
max={max}
locale={locale}
aria-label={label}
className="cr-progress"
>
<div className="cr-row">
<Base.Label className="cr-label">{label}</Base.Label>
<Base.Value className="cr-description" />
</div>
<Base.Track className="cr-progress-track">
<Base.Indicator className="cr-progress-indicator" />
</Base.Track>
</Base.Root>
);
}