Primitive / Atomstable

Progress

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

@glinui/uiComponent: progress

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add progress

Usage

Basic

TSX

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

Glass + Sizes

TSX

1import { Progress } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-4">
6      <Progress variant="glass" size="sm" value={25} aria-label="Small" />
7      <Progress variant="liquid" size="md" value={50} aria-label="Medium" />
8      <Progress variant="matte" size="lg" value={75} aria-label="Large" />
9    </div>
10  )
11}

Circular

30%

64%

88%

TSX

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

Indeterminate

TSX

1import { Progress, ProgressCircle } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex items-center gap-4">
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

Built on Radix Progress with `role="progressbar"`.
Provide `aria-label` for screen readers.

ARIA Attributes

`role="progressbar"`
`aria-valuenow`
`aria-valuemin`
`aria-valuemax`

Reduced Motion

Width transition respects `prefers-reduced-motion` via `motion-reduce:transition-none`.

Affected properties

width

API Reference

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "liquid" \| "matte"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Track height (h-2/h-3/h-4).
`value`	`number`	No	`0`	Progress value (0–100, clamped).
`indeterminate`	`boolean`	No	`false`	Loading state without a specific value.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Progress } from "@glinui/ui"

Source Files

progress.tsx

progress.test.tsxtest

Dependencies

@glinui/ui

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.