Mokri

Preview

25100

75100

<> import.ts

import { ProgressBar } from "@/components/ui/progress-bar"

<> component.tsx

import { ProgressBar } from "@/components/ui/progress-bar"

<ProgressBar />

Linear or scroll progress indicator with labels, animation and colors.

<> import.ts

import { ProgressBar, ProgressBarPresets } from "@/components/ui/progress-bar"

Prop	Type	Default	Description
`value`	`number`	`0`	Current value (0-100 when max=100)
`max`	`number`	`100`	Maximum value
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Bar height and text size
`type`	`"linear" \| "scroll"`	`"linear"`	Render mode
`color`	`string`	—	Tailwind color name or hex
`backgroundColor`	`string`	—	Tailwind color name or hex
`showLabel`	`boolean`	`false`	Show text label
`label`	`string`	—	Custom label text
`showPercentage`	`boolean`	`false`	Show percentage value
`animated`	`boolean`	`false`	Animate bar fill
`striped`	`boolean`	`false`	Striped background
`scrollProgress`	`boolean`	`false`	Track page scroll as value
`className`	`string`	`""`	Additional CSS classes