Primitive / Atomstable

Progress

Determinate linear and circular progress indicators with tokenized variants and sizing.

@glinui/uiComponent: progress

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add progress

Usage$

TSX

1import { Progress } from "@glinui/ui"
2
3export function ProgressBasicDemo() {
4return <Progress value={45} aria-label="Upload progress" />
5}

Examples$

Variants$

TSX

1import { Progress } from "@glinui/ui"
2
3export function ProgressVariantDemo() {
4return (
5  <div className="space-y-3">
6    <Progress value={52} />
7    <Progress variant="glass" value={68} />
8    <Progress variant="liquid" value={82} />
9    <Progress variant="matte" value={38} />
10  </div>
11)
12}

Sizes$

TSX

1import { Progress } from "@glinui/ui"
2
3export function ProgressSizeDemo() {
4return (
5  <div className="space-y-3">
6    <Progress size="sm" value={30} />
7    <Progress size="md" value={50} />
8    <Progress size="lg" value={80} />
9  </div>
10)
11}

Circular Progress$

28%

64%

86%

TSX

1import { ProgressCircle } from "@glinui/ui"
2
3export function ProgressCircleDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-5">
6    <ProgressCircle size="sm" value={28} aria-label="Small progress" />
7    <ProgressCircle size="md" variant="glass" value={64} aria-label="Glass progress" />
8    <ProgressCircle size="lg" variant="liquid" value={86} aria-label="Liquid progress" />
9  </div>
10)
11}

Indeterminate$

TSX

1import { Progress, ProgressCircle } from "@glinui/ui"
2
3export function ProgressIndeterminateDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-5">
6    <div className="w-64">
7      <Progress variant="glass" indeterminate aria-label="Loading data" />
8    </div>
9    <ProgressCircle variant="matte" indeterminate aria-label="Syncing" />
10  </div>
11)
12}

Accessibility$

Root uses Radix Progress semantics with role="progressbar".
Circular variant also exposes role="progressbar" with proper value attrs.
Provide aria-label or external label for non-visual users.
Values are clamped between 0 and 100.

Reduced Motion$

Width transitions are disabled when prefers-reduced-motion is enabled.

API Reference$

Prop	Type	Required	Default	Description
`indeterminate`	`boolean`	No	`false`	Render loading state without aria-valuenow and fixed width indicator.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from progressVariants.
`value`	`number`	No	`-`	Current progress value from 0 to 100.
`variant`	`"default" \| "glass" \| "liquid" \| "matte"`	No	`"default"`	Variant option from progressVariants.

ProgressCircle Props$

Prop	Type	Required	Default	Description
`cap`	`"round" \| "square" \| "butt"`	No	`"round"`	Auto-generated from TypeScript source.
`formatValue`	`(value: number) => React.ReactNode`	No	`-`	Auto-generated from TypeScript source.
`indeterminate`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`showValue`	`boolean`	No	`true`	Auto-generated from TypeScript source.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from progressCircleVariants.
`strokeWidth`	`number`	No	`4`	Auto-generated from TypeScript source.
`value`	`number`	No	`-`	Auto-generated from TypeScript source.
`variant`	`NonNullable<VariantProps<typeof progressVariants>["variant"]>`	No	`"default"`	Auto-generated from TypeScript source.

Source$

TSX

1import { Progress, ProgressCircle } from "@glinui/ui"

packages/ui/src/components/progress.tsx

packages/ui/src/tests/progress.test.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/progress.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

ProgressProps

`ProgressCircleProps`

Prop	Type	Required	Default	Description
`cap`	`"round" \| "square" \| "butt"`	No	`"round"`	-
`formatValue`	`(value: number) => React.ReactNode`	No	`-`	-
`indeterminate`	`boolean`	No	`false`	-
`showValue`	`boolean`	No	`true`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from progressCircleVariants.
`strokeWidth`	`number`	No	`4`	-
`value`	`number`	No	`-`	-
`variant`	`NonNullable<VariantProps<typeof progressVariants>["variant"]>`	No	`"default"`	-

`ProgressProps`

Prop	Type	Required	Default	Description
`indeterminate`	`boolean`	No	`false`	Render loading state without aria-valuenow and fixed width indicator.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from progressVariants.
`value`	`number`	No	`-`	Current progress value from 0 to 100.
`variant`	`"default" \| "glass" \| "liquid" \| "matte"`	No	`"default"`	Variant option from progressVariants.