Progress Accordion

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

General

Shipping

Was this example helpful?

Usage#


Code
import { ProgressAccordion } from "@medusajs/ui"
Code
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#


ProgressAccordion

This component is based on the Radix UI Accordion primitves.

ProgressAccordion.Header

PropTypeDefault
status
"not-started"
|"in-progress"
|"completed"
"not-started"
Was this helpful?

Examples#


Single#

General

Shipping

Was this example helpful?

Multiple#

General

Shipping

Was this example helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break