export const title = "Progress indicator components"
export const description = "Free and open-source React progress indicator components built for modern applications and websites. These progress indicators are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/progress-indicators",
}

import * as Demos from "@/components/base/progress-indicators/progress-indicators.demo.tsx";

<PreviewAndCode title="Progress indicator example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.ProgressBarDefault />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/ProgressBarDefault" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this progress indicator component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add progress-indicators progress-circles
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/progress-indicators" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the calendar components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Progress indicator examples

Below are examples and variations of this progress indicator component:

### Default {{ tocOnly:true }}

<PreviewAndCode title="Default">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.ProgressBarDefault />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/ProgressBarDefault" />
    </TabPanel>
</PreviewAndCode>

### Text right {{ tocOnly:true }}

<PreviewAndCode title="Text right">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.ProgressBarTextRight />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/ProgressBarTextRight" />
    </TabPanel>
</PreviewAndCode>

### Text bottom {{ tocOnly:true }}

<PreviewAndCode title="Text bottom">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.ProgressBarTextBottom />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/ProgressBarTextBottom" />
    </TabPanel>
</PreviewAndCode>

### Text top floating {{ tocOnly:true }}

<PreviewAndCode title="Text top floating">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.ProgressBarTextTopFloating />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/ProgressBarTextTopFloating" />
    </TabPanel>
</PreviewAndCode>

### Text bottom floating {{ tocOnly:true }}

<PreviewAndCode title="Text bottom floating">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.ProgressBarTextBottomFloating />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/ProgressBarTextBottomFloating" />
    </TabPanel>
</PreviewAndCode>

### Circle progress bar {{ tocOnly:true }}

<PreviewAndCode title="Circle progress bar">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CircleProgressBar />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/CircleProgressBar" />
    </TabPanel>
</PreviewAndCode>

### Circle progress bar label {{ tocOnly:true }}

<PreviewAndCode title="Circle progress bar label">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CircleProgressBarLabel />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/CircleProgressBarLabel" />
    </TabPanel>
</PreviewAndCode>

### Half circle progress bar {{ tocOnly:true }}

<PreviewAndCode title="Half circle progress bar">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.HalfCircleProgressBar />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/HalfCircleProgressBar" />
    </TabPanel>
</PreviewAndCode>

### Half circle progress bar label {{ tocOnly:true }}

<PreviewAndCode title="Half circle progress bar label">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.HalfCircleProgressBarLabel />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-indicators/HalfCircleProgressBarLabel" />
    </TabPanel>
</PreviewAndCode>