Progress

Determinate and indeterminate progress with a readable task label.

CoreBasics@gaudi/design-system/core/ProgressView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Progress from '@gaudi/design-system/core/Progress';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/progress-multi-step.json.

import Progress from '@gaudi/design-system/core/Progress';
<Progress value={completed} max={total} label='Upload progress' />

Props

label

value60

maxdefault 100

valueText

tonedefault accent

Progress.jsx

import Progress from '@gaudi/design-system/core/Progress';
<Progress label='Uploading files' value={60} />

6 props

Provide a task label and meaningful value text. Avoid announcing every small progress update.