Progress
Displays the status of a task that takes a long time.
registry/brook/ui/progress/progress.tsx
"use client";
import { Progress } from "@base-ui/react/progress";
import { cn } from "../../../lib/utils";
import styles from "./progress.module.css";
function ProgressRoot({ className, ...props }: Progress.Root.Props) {
return <Progress.Root className={cn(styles.root, className)} {...props} />;
}
function ProgressLabel({ className, ...props }: Progress.Label.Props) {
return <Progress.Label className={cn(styles.label, className)} {...props} />;
}
function ProgressTrack({ className, ...props }: Progress.Track.Props) {
return <Progress.Track className={cn(styles.track, className)} {...props} />;
}
function ProgressIndicator({ className, ...props }: Progress.Indicator.Props) {
return <Progress.Indicator className={cn(styles.indicator, className)} data-slot="progress-indicator" {...props} />;
}
function ProgressValue({ className, ...props }: Progress.Value.Props) {
return <Progress.Value className={cn(styles.value, className)} {...props} />;
}
export { ProgressRoot as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };
- Where it goes
- stats
- Interaction
- animated-counter
DependenciesBundle weight · light
- ui-primitives
- @base-ui/react@1.5.0