Docs

Data feedback

Progress

Visual indicator showing completion percentage of a process.

5 examplesData ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Progress } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Determinate Value Bar

An animated value-driven progress bar.

Determinate Value Bar rendered preview

Uploading13%

Indeterminate Spinner Bar

Communicate work of unknown duration.

Indeterminate Spinner Bar rendered preview

Processing...

A pulsing bar communicates ongoing work of unknown duration.

Multi-Step Wizard Progress

Show progress through a set of wizard steps.

Multi-Step Wizard Progress rendered preview

  1. Account
  2. Profile
  3. Billing
  4. Done

File Upload Progress

Detailed file upload speed and percentage container.

File Upload Progress rendered preview

build-bundle-v4.zip
72%
14.4 MB of 20 MB1.2 MB/s

Course Completion Progress

Learning progress card for course modules.

Course Completion Progress rendered preview

React 19 Mastery Course

12 of 15 Modules Completed

Overview

Progress is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

Progress adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/progress.json