import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Progress Tabs, }

{metadata.title}

A component that renders tabbed content, specifically designed for implementing multi-step tasks.

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

Usage

tsx

import { ProgressTabs } from "@medusajs/ui"

tsx

<ProgressTabs defaultValue="general">
  <ProgressTabs.List>
    <ProgressTabs.Trigger value="general">
      General
    </ProgressTabs.Trigger>
    <ProgressTabs.Trigger value="shipping">
      Shipping
    </ProgressTabs.Trigger>
    <ProgressTabs.Trigger value="payment">
      Payment
    </ProgressTabs.Trigger>
  </ProgressTabs.List>
  <ProgressTabs.Content value="general">
  </ProgressTabs.Content>
  <ProgressTabs.Content value="shipping">
  </ProgressTabs.Content>
  <ProgressTabs.Content value="payment">
  </ProgressTabs.Content>
</ProgressTabs>

API Reference

Examples

Set Status Indicator

Controlled Active Tab

Disabled Tab