Progress Accordion

A set of expandable content panels, specifically designed for implementing multi-step tasks

General

Shipping

Was this example helpful?

Usage

import { ProgressAccordion } from "@medusajs/ui"
1<ProgressAccordion type="single">2  <ProgressAccordion.Item value="general">3    <ProgressAccordion.Header>4      General5    </ProgressAccordion.Header>6    <ProgressAccordion.Content>7       {/* Content */}8    </ProgressAccordion.Content>9  </ProgressAccordion.Item>10  <ProgressAccordion.Item value="shipping">11    <ProgressAccordion.Header>12      Shipping13    </ProgressAccordion.Header>14    <ProgressAccordion.Content>15        {/* Content */}16    </ProgressAccordion.Content>17  </ProgressAccordion.Item>18</ProgressAccordion>

API Reference

This component is based on the Radix UI Accordion primitves.

ProgressAccordion.Header

PropTypeDefault
status
enum
"not-started"
Was this section helpful?

Examples

Single

General

Shipping

Was this example helpful?

Multiple

General

Shipping

Was this example helpful?