export const title = "Progress steps components"
export const description = "Powerful and customizable React progress step components built for modern applications and websites. These progress steps are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/progress-steps/progress-steps.demo.tsx";

<PreviewAndCode title="Progress steps example" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressIconCenteredNumberSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressIconCenteredNumberSm" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this progress steps 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-steps
        ```
    </TabPanel>

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

                <ComponentCodeTabs component="application/progress-steps" />
            </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 steps examples

Below are examples and variations of this progress steps component:

### Icon centered {{ tocOnly:true }}

<PreviewAndCode title="Icon centered" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressIconCenteredSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressIconCenteredSm" />
    </TabPanel>
</PreviewAndCode>

### Icon centered with number {{ tocOnly:true }}

<PreviewAndCode title="Icon centered with number" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressIconCenteredNumberSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressIconCenteredNumberSm" />
    </TabPanel>
</PreviewAndCode>

### Featured icon centered {{ tocOnly:true }}

<PreviewAndCode title="Featured icon centered" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressFeaturedIconCenteredSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressFeaturedIconCenteredSm" />
    </TabPanel>
</PreviewAndCode>


### Icon with text {{ tocOnly:true }}

<PreviewAndCode title="Icon with text" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressIconWithTextSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressIconWithTextSm" />
    </TabPanel>
</PreviewAndCode>

### Icon with number {{ tocOnly:true }}

<PreviewAndCode title="Icon with number" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressIconWithNumberSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressIconWithNumberSm" />
    </TabPanel>
</PreviewAndCode>

### Featured icon with text {{ tocOnly:true }}

<PreviewAndCode title="Featured icon with text" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressFeaturedIconWithTextSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressFeaturedIconWithTextSm" />
    </TabPanel>
</PreviewAndCode>



### Minimal icons {{ tocOnly:true }}

<PreviewAndCode title="Minimal icons" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressMinimalIconsSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressMinimalIconsSm" />
    </TabPanel>
</PreviewAndCode>

### Minimal icons connected {{ tocOnly:true }}

<PreviewAndCode title="Minimal icons connected" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressMinimalIconsConnectedSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressMinimalIconsConnectedSm" />
    </TabPanel>
</PreviewAndCode>

### Text with line {{ tocOnly:true }}

<PreviewAndCode title="Text with line" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressTextWithLineSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressTextWithLineSm" />
    </TabPanel>
</PreviewAndCode>

### Minimal icons connected {{ tocOnly:true }}

<PreviewAndCode title="Minimal icons connected" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] overflow-hidden flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressMinimalIconsConnectedSm />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="progress-steps/ProgressMinimalIconsConnectedSm" />
    </TabPanel>
</PreviewAndCode>