Menu
  • Get Started
  • Product
  • Resources
  • Tools & SDKs
  • Framework
  • Reference

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
ProgressStatus
"not-started"
Was this page helpful?

Examples#

Single#

General

Shipping

Was this example helpful?

Multiple#

General

Shipping

Was this example helpful?