Tabs

Use tabs when readers need to switch between related views in the same space.

Spring

Mild temperatures and longer daylight hours.

Warmer days, stronger sun, and later sunsets.

Cooler evenings and changing leaf colors.

<Tabs>  <Tab label="Spring">    Mild temperatures and longer daylight hours.  </Tab>  <Tab label="Summer">    Warmer days, stronger sun, and later sunsets.  </Tab>  <Tab label="Autumn">    Cooler evenings and changing leaf colors.  </Tab></Tabs>

Structure

Use `Tabs` and `Tab` together

Wrap each Tab inside Tabs.

Morning

Best for focused planning and priority setting.

Good for meetings and collaborative tasks.

Useful for review, cleanup, and next-day prep.

<Tabs>  <Tab label="Morning">    Best for focused planning and priority setting.  </Tab>  <Tab label="Afternoon">    Good for meetings and collaborative tasks.  </Tab>  <Tab label="Evening">    Useful for review, cleanup, and next-day prep.  </Tab></Tabs>

Add clear tab labels

label is required on every Tab. Keep labels short so readers can scan options quickly.

Add icons

Use icon on Tab to display an icon next to the tab label.

Overview

A quick summary of what is included.

Steps to complete before you begin.

Extra context and reminders.

<Tabs>  <Tab label="Overview" icon="lucide:layout-grid">    A quick summary of what is included.  </Tab>  <Tab label="Checklist" icon="lucide:list-checks">    Steps to complete before you begin.  </Tab>  <Tab label="Notes" icon="lucide:notebook-pen">    Extra context and reminders.  </Tab></Tabs>

Rich tab content

Each tab can include multiple paragraphs, lists, and other components.

Plan

Start with a clear objective.

Define the outcome.
List required materials.
Estimate the time needed.

Complete one section at a time.

<Tabs>  <Tab label="Plan">    Start with a clear objective.     - Define the outcome.    - List required materials.    - Estimate the time needed.  </Tab>  <Tab label="Execute">    Complete one section at a time.     <Callout type="info" title="Work in batches">      Group similar tasks together to reduce context switching.    </Callout>  </Tab></Tabs>

Props

`Tab` props

Prop	Description	Type	Default
`label`	Text displayed in the tab button.	`string`	—
`icon`	Optional icon name displayed before the label.	`string`	—

`Tabs` props

Tabs is a layout container and currently does not accept props.