Design System Builder

Progress

Progress is a component component that provides progress functionality.

Active

Examples

size

Different size options for the Progress component.

sm

md

lg

Installation

npm install @your-design-system/progress
import { Progress } from "@/components/ui/progress"

export function ProgressDemo() {
  return (
    <Progress size="md">
      {/* Content */}
    </Progress>
  )
}

API Reference

PropTypeDefaultDescription
valuenumber-

The value prop for the component.

maxnumber100

The max prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

relativew-fulloverflow-hiddenrounded-fullbg-secondary

size Variants

sm

h-1

md

h-2

lg

h-3

Design System Compliance

This component is validated against atomic design principles and foundation token usage.