Progress

Linear and circular progress indicators.

Preview

65%

80%

bash

npx auralix-ui add progress

tsx

import { LinearProgress, CircularProgress } from "@/components/ui/Progress";

<LinearProgress value={75} />
<CircularProgress value={50} showValue />

Name	Type	Default	Description
`value`	`number`	`0`	Progress value (0-100).
`variant`	`"default" \| "gradient" \| "striped"`	`"default"`	Visual variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the progress bar.
`showValue`	`boolean`	`false`	Show percentage value.

On this page