container · Normal DOM only

Progress

Linear bar with determinate value (0–100) or indeterminate sweep. Radix-backed.

Use Progress for measurable long-running operations: upload, migration, batch sync. For sub-second waits use Spinner; for surface-level "data is coming" use Skeleton.

Inside a Twenty front-component, prefer the bridge import

This Progress is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { ProgressBar } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Twenty's name for what we call Progress.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Progress } from '@8maverik8/twenty-design';

Examples

Determinate + indeterminate

Upload35%

Indeterminate sync…

tsx
<Progress value={35} label="Upload" showValue />
<Progress value={null} label="Sync…" />

Guidelines

✓

Set value=null for indeterminate progress.Animated sweep tells the user the system is alive without lying about completion.

✓

Pair label + showValue for verbose surfaces."Upload 35%" is clearer than a bare bar.

Keep an indeterminate Progress on screen indefinitely.Users assume it's stuck after a while — switch to a Status or Banner if waiting is expected.