Skip to content
Blode.md

AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.

Tabs

Organize content into switchable tabbed panels.

Use the Tabs and Tab components to let readers switch between related content without leaving the page.

Basic tabs

Each Tab needs a title prop to label its tab button:

<Tabs>
  <Tab title="npm">`npm install blodemd`</Tab>
  <Tab title="pnpm">`pnpm add blodemd`</Tab>
  <Tab title="yarn">`yarn add blodemd`</Tab>
</Tabs>
npm install blodemd

Content tabs

Tabs work with any content, not just code:

<Tabs>
  <Tab title="Overview">
    Blode.md turns your Markdown files into a production-ready documentation
    site.
  </Tab>
  <Tab title="Features">
    - Full-text search - Custom domains - OpenAPI integration - Built-in
    components
  </Tab>
</Tabs>

Blode.md turns your Markdown files into a production-ready documentation site.

Default tab

Use defaultTabIndex on Tabs to set which tab is active on load (zero-indexed):

<Tabs defaultTabIndex={1}>
  <Tab title="First">This tab is not selected by default.</Tab>
  <Tab title="Second">This tab is selected by default.</Tab>
</Tabs>
This tab is selected by default.

Props

Tabs

FieldTypeDescriptionRequiredDefault
defaultTabIndexnumberIndex of the tab to show on initial render.Optional0
childrenReactNodeOne or more Tab components.Yes

Tab

FieldTypeDescriptionRequired
titlestringLabel displayed on the tab button. You can also use `label` as an alias.Optional
iconReactNodeIcon displayed before the tab label.Optional
childrenReactNodeContent shown when the tab is active.Yes