Octri

Tabs

Tabs hold alternatives a reader chooses between, where only one applies to them, such as instructions for each operating system or each package manager. The first tab is open when the page loads.

Example

bash
brew install acme
mdx
<Tabs>
  <Tab title="macOS">
    ```bash
    brew install acme
    ```
  </Tab>
  <Tab title="Windows">
    ```powershell
    winget install Acme.CLI
    ```
  </Tab>
</Tabs>

Tabs props

childrenTab

The tabs, in the order they appear.

Tab props

titlestringrequired

The label on the tab.

childrenMarkdown

The tab's content, between the tags: text, code, or other components. Leave a blank line after the opening tag and before the closing one.

Tabs or CodeGroup

When each tab is only a code block, CodeGroup is shorter to write. Use Tabs when a tab also needs words.

  • CodeGroup: tabs made of code blocks.
  • Accordion: sections a reader can open, more than one at a time.