Primitives
Progress
A lightweight progress bar with semantic colors and sizes.
import { Progress } from "@pipecat-ai/voice-ui-kit";
<Progress percent={50} className="h-4" />| Prop | Type | Default |
|---|---|---|
percent? | number | 0 |
size? | "default" | "half" | "xs" | "sm" | "lg" | "xl" | "default" |
color? | "primary" | "secondary" | "destructive" | "warning" | "active" | "inactive" | "agent" | "client" | "primary" |
rounded? | boolean | false |
className? | string | undefined |
Usage
Basic
import { Progress } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-col gap-3">
<Progress className="h-4" />
<Progress percent={50} className="h-4" />
<Progress percent={100} className="h-4" />
</div>Sizes
import { Progress } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-row gap-3 items-center">
<Progress percent={50} size="sm" className="h-4" />
<Progress percent={50} size="lg" className="h-4" />
<Progress percent={50} size="xl" className="h-4" />
<Progress percent={50} size="half" className="h-4" />
</div>Colors
import { Progress } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-row gap-3 items-center">
<Progress percent={50} color="secondary" className="h-4"/>
<Progress percent={50} color="destructive" className="h-4"/>
<Progress percent={50} color="warning" className="h-4"/>
<Progress percent={50} color="active" className="h-4"/>
<Progress percent={50} color="inactive" className="h-4"/>
<Progress percent={50} color="agent" className="h-4"/>
<Progress percent={50} color="client" className="h-4"/>
</div>Rounded
import { Progress } from "@pipecat-ai/voice-ui-kit";
<Progress percent={50} rounded className="h-4 w-full" />In Badges
import { Badge, Progress } from "@pipecat-ai/voice-ui-kit";
<Badge buttonSizing>
<Progress percent={50} size="lg" className="h-[2px]" />
Some Badge
</Badge>