A React progress bar component built on Radix UI's Progress primitive with customizable styling and smooth transitions. ## Key Components - **Progress** - Main progress bar component with forwarded ref support - **ProgressPrimitive** - Radix UI progress primitives for accessibility and behavior - **cn utility** - Class name merging utility for styling ## Usage Example ```typescript import { Progress } from "./progress" export default function ProgressDemo() { const [progress, setProgress] = React.useState(13) React.useEffect(() => { const timer = setTimeout(() => setProgress(66), 500) return () => clearTimeout(timer) }, []) return (
{/* Basic progress bar */} {/* Custom indicator styling */} {/* Loading state */}
) } ``` The component supports standard HTML attributes, custom className for the root element, and `indicatorClassName` for styling the progress indicator. The progress indicator animates smoothly via CSS transforms and accepts values from 0-100.