Repo
Docs
Monorepo Handbook
tools
Storybook

Using Storybook with Turborepo

Storybook (opens in a new tab) is a popular way to build UI components in an isolated environment. By putting Storybook into your Turborepo, you can easily develop your design system right alongside your applications. If you'd rather use a template, this guide is walking through how to build this Storybook/Turborepo template (opens in a new tab) on Vercel.

Guide

This guide shows you how to:

  1. Set up Storybook in a monorepo
  2. Create your first story
  3. Ensure Storybook works with the rest of your tasks

1. Create your monorepo

If you don't have an existing project, use our quickstart to create a new monorepo.

npx create-turbo@latest

2. Add a new workshop app

Storybook needs a builder to use so we will create a Vite app.

cd apps
npm create vite

Follow the prompts to create an app named "workshop" as a React, TypeScript app.

Next, we need to scaffold Storybook:

cd workshop
npx sb init --skip-install
npm install --save-dev @storybook/cli   # Manually install deps and CLI
You may be prompted to enable the --legacy-peer-deps flag. This flag is required for Storybook to work in a monorepo.

3. Set up a story for your Button component

The Storybook scaffold creates some stories and React components in the /src/stories directory. To create a story for the button from your ui package, we will replace the import in Button.stories.tsx with our own.

  1. Update the Button in your ui package to match the story's specifications.
packages/ui/Button.tsx
interface Props {
  primary?: boolean;
  size?: "small" | "large";
  label?: string;
}
 
export const Button = ({
  primary = false,
  label = "Boop",
  size = "small",
}: Props) => {
  return (
    <button
      style={{
        backgroundColor: primary ? "red" : "blue",
        fontSize: size === "large" ? "24px" : "14px",
      }}
    >
      {label}
    </button>
  );
};
  1. Add your ui package to the workshop app:
apps/workshop/package.json
{
  // ...
  {
    "dependencies": {
      "ui": "*",
      // ...
    }
  }
}

And npm install one more time to make sure that your ui package is installed in the workshop app.

  1. Replace the Button import in the Button.stories.tsx so that it comes from your ui package:
apps/workshop/src/stories/Button.stories.tsx
import { Button } from 'ui'

4. Align tasks

The last thing that we need to do is make sure that Storybook is lined up with the rest of your tasks:

apps/workshop/package.json
{
  // ...
  "scripts": {
    "dev": "storybook dev -p 6006",
    "build": "storybook build"
  }
}

To ensure build caching, you'll first need to add storybook-static to your .gitignore. Then, add storybook-static to the outputs of your turbo.json build task:

turbo.json
{
  "pipeline": {
    "build": {
      "outputs": [
        "dist/**",
+       "storybook-static/**"
      ]
    }
  }
}

Your dev and build tasks will now include Storybook, allowing you to develop your Storybook alongside your applications and enjoy cached builds with the rest of your applications.

Deploy on Vercel

Let's deploy your Storybook project.

In the "Build and Development Settings" on the General tab of your project settings, change your "Output Directory" to storybook-static.

PrismaChangelog