Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/progress.

When to use it

Use Progress when the system can report a meaningful completion value. It works well for uploads, onboarding steps expressed as a percentage, and checkout or setup flows that expose measured progress.

If the task is loading but you do not know how far along it is, use a skeleton or another indeterminate loading pattern instead.

Composition notes

Progress is a single visual primitive. The accessible label, task name, and visible percentage usually come from the surrounding layout rather than the component itself.

Keep the bar focused on the visual state and place supporting text nearby so the screen layout explains what is progressing.

Behavior and theming guidance

Treat the value as a percentage from 0 to 100. When you show a number next to the bar, keep it in sync with the same canonical reference so the visual fill and the text never drift apart.

Use color as reinforcement, not the only signal. A short label and visible percentage make the state much clearer, especially in dense admin or checkout surfaces.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Progress.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes