Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Loading...

Installation

npx shadcn@latest add @scrollxui/progress 

Usage

import { Progress } from '@/components/ui/progress';
<Progress variant='slim' value={33} />

Examples


Default

Loading...

Outline

Loading...

Slim

Loading...

API Reference

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Props

PropertyTypeDefaultDescription
valuenumber0
The current progress value, typically between 0 and 100.
variant"default" | "slim" | "outline-solid""default"
Visual style of the progress bar.
indicatorClassNamestring_
Optional CSS class applied to the progress indicator.
indicatorStyleReact.CSSProperties_
Optional inline styles applied to the progress indicator.
classNamestring_
CSS class for the outer progress container.
styleReact.CSSProperties_
Inline styles for the outer progress container.
childrenReact.ReactNode_
Optional children to render inside the progress container (rarely used).

Built withby Ahdeetai.