saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Progress

Progress

Displays a progress bar indicating completion percentage.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/progress

Usage

import { Progress } from "@/components/ui/progress"
<Progress value={33} />

Examples

Controlled

Loading...
Interactive progress with start button.

API Reference

PropTypeDefaultDescription
valuenumber—The current progress value (0-100).
maxnumber100The maximum value.

On This Page

  • Installation
  • Usage
  • Examples
  • Controlled
  • API Reference
Daily Shooting Schedule67%
Budget Used$847K / $1.25M
Post-Production Complete100%

0%