Progress

Horizontal progress bar via Radix UI

Steps

Usage

import { Progress } from '@tryvienna/ui'

<Progress value="60" />

Examples

Default

Default

<Progress value="60" />

Steps

Steps

<div className="grid gap-4 w-80">
  <div className="grid gap-1">
    <span className="text-sm text-muted-foreground">0%</span>
    <Progress value={0} />
  </div>
  <div className="grid gap-1">
    <span className="text-sm text-muted-foreground">25%</span>
    <Progress value={25} />
  </div>
  <div className="grid gap-1">
    <span className="text-sm text-muted-foreground">50%</span>
    <Progress value={50} />
  </div>
  <div className="grid gap-1">
    <span className="text-sm text-muted-foreground">75%</span>
    <Progress value={75} />
  </div>
  <div className="grid gap-1">
    <span className="text-sm text-muted-foreground">100%</span>
    <Progress value={100} />
  </div>
</div>

API Reference

Progress

Prop	Type	Default	Description
value	number | null | undefined	-

Also accepts all props from ProgressPrimitive.Root.

Data Attributes

Component	data-slot
Progress	"progress"