mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
fd72ad7430
* docs: add API Reference sections to all component documentation - Add comprehensive API Reference sections to 36 component docs - Document custom props, variants, and behaviors for each component - Distinguish between Base UI aliases and custom components - Include prop tables with Type, Default, and Description columns - Follow alert-dialog.mdx as the reference standard for quality Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: add essential inline examples and 'Also exported as' notes - Add inline code example for Menu's inset prop showing alignment pattern - Add 'Also exported as ToggleGroupItem' note to Toggle component - Add ToggleGroupSeparator to toggle-group documentation - Add 'Also exported as RadioGroupItem' note to Radio component Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix section ordering - API Reference before Examples Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: remove references to non-exported components Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix inaccurate API documentation per Cubic AI review Co-Authored-By: pasquale@cal.com <pasquale@cal.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com>
96 lines
1.9 KiB
Plaintext
96 lines
1.9 KiB
Plaintext
---
|
|
title: Progress
|
|
description: Displays the status of a task that takes a long time.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/progress#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-progress-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/progress
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="progress" title="components/ui/progress.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
Progress,
|
|
ProgressLabel,
|
|
ProgressValue,
|
|
} from "@/components/ui/progress"
|
|
```
|
|
|
|
```tsx
|
|
<Progress value={40} />
|
|
```
|
|
|
|
Note: If you render children inside `Progress`, you must also include `ProgressTrack` and `ProgressIndicator` inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.
|
|
|
|
## API Reference
|
|
|
|
### Progress
|
|
|
|
Root component. Styled wrapper for `Progress.Root` from Base UI. When no children are provided, automatically renders a track and indicator.
|
|
|
|
### ProgressTrack
|
|
|
|
Track container for the progress indicator. Styled wrapper for `Progress.Track` from Base UI.
|
|
|
|
### ProgressIndicator
|
|
|
|
Visual indicator showing the current progress. Styled wrapper for `Progress.Indicator` from Base UI.
|
|
|
|
### ProgressLabel
|
|
|
|
Label text for the progress bar. Styled wrapper for `Progress.Label` from Base UI.
|
|
|
|
### ProgressValue
|
|
|
|
Displays the current value. Styled wrapper for `Progress.Value` from Base UI.
|
|
|
|
## Examples
|
|
|
|
### With Label and Value
|
|
|
|
<ComponentPreview name="p-progress-2" />
|
|
|
|
### With Formatted Value
|
|
|
|
<ComponentPreview name="p-progress-3" />
|