ui / feedback

Progress

An accessible determinate progress indicator with smooth updates.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

REGISTRY BUILD72%

INSTALL / SOURCE REGISTRY

Add Progress to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/progress.json

registry/default/ui/progress.tsx

import * as React from "react"
import "@/components/designos/designos.css"

export function Progress({ value, max = 100, label = "Progress" }: { value: number; max?: number; label?: string }) {
  const percent = Math.min(100, Math.max(0, (value / max) * 100))
  return <div className="dos-progress" role="progressbar" aria-label={label} aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}><div className="dos-progress__bar" style={{ width: `${percent}%` }} /></div>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy