Progress Accordion

A component that renders a set of expandable content, specifically designed for implementing multi-step tasks.

In this guide, you'll learn how to use the Progress Accordion component.

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#

Examples#

Only One Accordion Open#

Allow Multiple Accordions to Open#

Set Status Indicator#

Controlled Accordion Open State#

Disabled Accordion Item#