# Shadcn Basic

> Basic progress.

- Type: example, free and open source (MIT)
- Component: [Progress](https://reui.io/components/progress.md)
- Page: https://reui.io/components/progress/c-progress-1
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/progress.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/progress.md
- MCP: `get_example("c-progress-1")`
- Registry item: https://reui.io/r/styles/base-nova/c-progress-1.json
- Uses: Progress

## Best for

A name on the left and its percent on the right, over a bar left at the active style's default height

## When not to use

- A bar that must stay 4px thin whatever the active style: use [Small](https://reui.io/components/progress/c-progress-2.md) (`get_example("c-progress-2")`)

## Install

```bash
npx shadcn@latest add @reui/c-progress-1
```

## About Shadcn Progress

### When to use

- Labeled bars that report how far an upload, a download or a workspace setup has got, as a percent
- File transfer rows with time left, and setup checklists whose bar counts the steps done
- Compact bars in dense list rows, and bars pinned to a set height or filled in a color of their own

### When not to use

- A drop zone or picker where people choose the documents and images to send: use [File Upload](https://reui.io/components/file-upload.md) (`get_component("file-upload")`)
- Numbered steps the user can open or move between, each with its own panel: use [Stepper](https://reui.io/components/stepper.md) (`get_component("stepper")`)
- A wait of unknown length, where no share of the work done can be shown: use [Spinner](https://reui.io/components/spinner.md) (`get_component("spinner")`)

### Agent notes

- `ProgressLabel` and `ProgressValue` exist in the base twin only; radix `Progress` drops its children, so print the label and percent beside it
- Set bar height on the `progress-track` slot in base, as `c-progress-2` does, and with a height class on `Progress` in radix, whose root is the track
- Only a base `ProgressLabel` names the bar for screen readers; give every other bar, radix ones included, an aria-label naming the task

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.