Components
Progress
Animated progress bar with configurable value and visual variants.
Progress
An animated progress bar component for displaying completion status.
Import
import { Progress } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<div className="space-y-4">
<Progress value={33} />
<Progress value={66} />
<Progress value={100} />
</div>Sizes
Sizes
.tsx
<div className="space-y-4">
<Progress value={50} className="h-1" />
<Progress value={50} className="h-2" />
<Progress value={50} className="h-4" />
</div>Indeterminate
Indeterminate
.tsx
<Progress />Custom Colors
Custom Colors
.tsx
<Progress
value={75}
className="[&>div]:bg-cyan-500"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Progress percentage (0–100) |
max | number | 100 | Maximum value |
className | string | — | Additional CSS classes |