Docs Tabs

A Storybook addon that adds tabs to the Docs Addon.

View on Github


A Storybook addon that adds tabs to the Docs Addon.

Note: This addon is a little bit hacky. The storybook api does not support something like this at all. But you can still use this addon because it is still using mdx and its "normal" api.

Getting started

1. Install

npm install --save-dev storybook-addon-docs-tabs
# yarn add -D storybook-addon-docs-tabs

2. Add new Container to .storybook/preview.js

import { DocsContainer } from "@storybook/addon-docs/blocks";
import { TabContainer } from "storybook-addon-docs-tabs";

export const parameters = {
  docs: {
    container: ({ children, context }) => (
      <DocsContainer context={context}>
        <TabContainer context={context}>{children}</TabContainer>

2. Hide Tab Stories from the sidebar in .storybook/manager-head.html

  [data-parent-id^="hidden"] {
    display: none !important;

3. Add jsx in .storybook/tsconfig.json

Optional: If you havent configured jsx

  "extends": "../",
  "compilerOptions": {
    "jsx": "react"

4. Add react preset in .storybook/.babelrc

Optional: If you havent configured jsx

  "presets": [["@babel/react", { "runtime": "automatic" }]]

Usage in story

Set id of story

Unfortunately this is necessary because of the limited Storybook api. Any unique string can be used as id.

Prefix the stories title with hidden/ to hide it in the sidebar.

import { Meta } from "@storybook/addon-docs";


Import Tabs

import { Meta } from "@storybook/addon-docs";
import * as DesignTab from "./design-tab.stories.mdx";
import * as ImplementationTab from "./implementation-tab.stories.mdx";

  title="Example/Tab Example"
    tabs: [
      { label: "Design", mdx: DesignTab },
      { label: "Implementation", mdx: ImplementationTab },

Add Header CTA and Footer

You can extend the TabContainer with a custom call to action and a custom footer which is displayed on every page.

property input type description
footerElement JSX.Element Displays your component on every page bottom
additionalHeaderElement JSX.Element Displays your component inside the header next to the title


{container: ({ children, context }) => (
  <DocsContainer context={context}>
      footerElement={<Footer />}
      additionalHeaderElement={<Header />}