All componentssubtleoutlinexssmmdlgxl
Progress
Determinate progress bars with outline and subtle tracks in five sizes.
Variants
Sizes
Install
zsh — progress
1bunx stylexblocks add progressUsage — Ark UI
progress.tsx
1234567891011121314151617import { Progress } from "#components/ui/ark-ui/progress.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // the real Ark Progress machine wearing the recipe styles — the machine // carries value state and aria; variant/size/shape resolve once on Root // and Track/Range inherit them via context <Progress.Root defaultValue={64} variant="subtle" size="md" shape="full" palette={indigoPalette}> <Progress.Label>Upload</Progress.Label> <Progress.Track> <Progress.Range striped /> </Progress.Track> <Progress.ValueText /> </Progress.Root> );}