All componentssubtleoutlinexssmmdlgxl
Progress
Determinate progress bars with outline and subtle tracks in five sizes.
Variants
Sizes
Install
zsh — progress
1bunx stylexblocks add progressUsage — Base UI
progress.tsx
1234567891011121314151617import { Progress } from "#components/ui/base-ui/progress.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // the real Base UI Progress machine wearing the recipe styles — the // machine carries value state and aria; variant/size/shape resolve once // on Root and Track/Range (Base UI's Indicator) inherit them via context <Progress.Root value={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> );}