Primitives

Progress

Determinate task progress with optional label and value rows.

Indexing registry

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

Progress

├── ProgressLabel

├── ProgressValue

├── ProgressTrack

└── ProgressIndicator

The refined source installs this primitive from src/registry/sources/refined/ui/progress.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/progress.json

See registry manifest

Raw code

Primary installed primitive source

Base UI Progress slot

src/registry/sources/refined/ui/progress.tsx

"use client";

import { Progress as ProgressPrimitive } from "@base-ui/react/progress";

import type {

ProgressIndicatorProps,

ProgressLabelProps,

ProgressProps,

ProgressTrackProps,

ProgressValueProps,

} from "@/components/refined-ui/contracts";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Refined skin slot, 100% Base UI: Track is --muted rail, Indicator fills w/ --primary from value/min/max, no JS.

// Optional Label+Value row above rail; both plain text slots.

export function Progress({ className, ...props }: ProgressProps) {

return (

<ProgressPrimitive.Root

data-ui="agent"

data-slot="progress"

className={cn("flex w-full flex-col gap-2", skinSlot("progress", {}), className)}

{...props}

/>

);

}

export function ProgressLabel({ className, ...props }: ProgressLabelProps) {

return (

<ProgressPrimitive.Label

data-ui="agent"

data-slot="progress-label"

className={cn("text-label font-medium text-foreground", className)}

{...props}

/>

);

}

export function ProgressValue({ className, ...props }: ProgressValueProps) {

return (

<ProgressPrimitive.Value

data-ui="agent"

data-slot="progress-value"

className={cn("text-label tabular-nums text-muted-foreground", className)}

{...props}

/>

);

}

export function ProgressTrack({ className, ...props }: ProgressTrackProps) {

return (

<ProgressPrimitive.Track

data-ui="agent"

data-slot="progress-track"

      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", skinSlot("progress-track", {}), className)}

{...props}

/>

);

}

export function ProgressIndicator({ className, ...props }: ProgressIndicatorProps) {

return (

<ProgressPrimitive.Indicator

data-ui="agent"

data-slot="progress-indicator"

className={cn(

        "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-emphasized)]",

skinSlot("progress-indicator", {}),

className,

)}

{...props}

/>

);

}

Refined UI

Progress

Composition

Parts

Raw code