Feedbackreadycomponentready

Progress

A native progress primitive with determinate, indeterminate, timed-demo, and tokenized indicator states.

Importimport { Progress } from 'radcn/progress'

Preview

Live package example

Render the upstream timed progress demo from value 13 to 66 with a 60% wrapper width.

Progress Demo

Render the upstream timed progress demo from value 13 to 66 with a 60% wrapper width.

Preview

import { Progress } from 'radcn/progress'

export function ProgressDemo() {
  return (
    <Progress
      ariaLabel="Progress"
      class="w-[60%]"
      value={13}
      style="width:60%;"
    />
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Progress } from 'radcn/progress'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Progress renders a native progress element with an accessible label, max value, and determinate value in server HTML.
The named demo starts with value 13 and updates to value 66 through scoped browser enhancement without React state.
The native progress element remains the semantic source of progress state while the visual indicator mirrors the value.
Indeterminate state remains available when value is omitted and is covered by existing fixture behavior.

Customization

Wrapper, native progress, track, and indicator parts expose public data-radcn-progress hooks and package classes.
className="w-[60%]" maps to class plus explicit 60% wrapper width style evidence.
bg-primary/20 and bg-primary map to --radcn-progress-bg, --radcn-progress-fg, and package token defaults.
Apps can customize width, class, style, max, value, accessible label, and CSS variables without changing the package API.
Existing custom-token fixtures remain the evidence for public Progress token modifiability.

Remix 3 Notes

use client, React useState, React useEffect, and the 500ms timeout map to scoped dependency-free browser behavior in the docs and fixture apps.
React component props and Radix Progress primitives map to server-rendered RadCN markup with a native progress element.
ProgressPrimitive.Root maps to data-radcn-progress-wrapper plus the native progress element; ProgressPrimitive.Indicator maps to data-radcn-progress-indicator.
className maps to class, cn maps to explicit class composition, and data-slot maps to public data-radcn-progress* hooks.
Tailwind w-[60%], bg-primary/20, bg-primary, h-2, rounded-full, overflow-hidden, flex, transition-all, and transform utilities map to package CSS, classes, style, CSS variables, and app-owned CSS.
Upstream translateX indicator movement maps to equivalent visible percentage progress through indicator width, not literal transform style equivalence.
Vendor source remains read-only evidence and is not imported by RadCN.