Base
Progress
Progress renders a 0–100 fill bar for upload, deploy, and completion states.
Installation
npx shadcn add https://rck.vibeboxph.com//r/progress.jsonLive preview & controls
Controls
<Progress value={40} label="Upload progress" />Anatomy
ProgressThe root `role="progressbar"` track.IndicatorThe filled portion reflecting `value`.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | 0–100 completion amount. |
| label | string | Progress | Accessible name announced to screen readers. |
| className | string | — | Track styling overrides. |
Accessibility
- Uses the built-in Progress primitive with `role="progressbar"` and `aria-valuenow/min/max`.
- Always pass a descriptive `label` when the bar isn't paired with visible status text.
- Mark the surrounding region `aria-busy="true"` while progress is indeterminate or incomplete.
Source
registry/rck/ui/progress.tsx
"use client";
import * as React from "react";
import * as ProgressPrimitive from "@/registry/rck/primitives/progress";
import { cn } from "@/lib/utils";
export interface ProgressProps extends React.ComponentPropsWithoutRef<
typeof ProgressPrimitive.Root
> {
/** Accessible label for screen readers (default: "Progress"). */
label?: string;
}
export const Progress = React.forwardRef<
React.ComponentRef<typeof ProgressPrimitive.Root>,
ProgressProps
>(({ className, value, label = "Progress", ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
data-slot="progress"
value={value}
aria-label={label}
className={cn(
"bg-surface-2 relative h-2 w-full overflow-hidden rounded-full",
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className="bg-primary size-full flex-1 transition-all duration-300 ease-out"
style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
/>
</ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;