Tabs

A tabbed component to switch between multiple views.

Tab 1

This is the content for Tab 1.

Tab 2

This is the content for Tab 2.

Tab 3

This is the content for Tab 3.

This is how you build a Tabs component:

<Tabs>
  <TabItem value="tab1" label="Tab 1" default>
    Content for Tab 1.
  </TabItem>
  <TabItem value="tab2" label="Tab 2">
    Content for Tab 2.
  </TabItem>
  <TabItem value="tab3" label="Tab 3">
    Content for Tab 3.
  </TabItem>
</Tabs>

Attributes

value string required
Unique identifier for the tab.

label string required
Label displayed on the tab.

default boolean optional
Marks this tab as the default selected tab.

Example with Additional Components

You can include other components inside tabs.

Tab with Callout

Feel free to add other components inside a Tab, like Callouts.

Tip

Tabs are useful for organizing content without cluttering the interface.

Tab with Code Block

You can also add code blocks here.

const fetchData = async () => {
  const response = await fetch("https://api.example.com/data");
  return response.json();
};