Adding Docs with Storybook

Learn how to use Storybook to add Docs to your project in this lesson.

We'll cover the following

Adding Docs with Storybook

Now that you’re sharing your project with the world, you should think about taking the documentation to the next level. Storybook has rapidly become a popular library for generating documentation pages for React components. Using Storybook, you can integrate live examples with all of the information devs need to take full advantage of your components.

Getting started with Storybook

Here’s how to get started with Storybook:

  • Storybook has a handy script that you can run with npx to get started:

    $ npx -p @storybook/cli@4.1.11 sb init

    Once that script finishes, you’ll see that you have some new devDependencies:

    // package.json
...
"devDependencies": {
  ...
  "@storybook/react": "^4.1.11",
  "@storybook/addon-actions": "^4.1.11",
  "@storybook/addon-links": "^4.1.11",
  "@storybook/addons": "^4.1.11"
},
...

    And two new scripts:

    // package.json
...
"scripts": {
  ...
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
},
...

    The script also added two new directories, .storybook and stories. The .storybook directory contains configuration, and the stories directory is where your documentation will live. The script generated some placeholder documentation in stories/index.stories.js.

  • Run the storybook script to start it up:

    $ npm run storybook

Storybook 4.1.11 started
4.96 s for manager and 4.63 s for preview

Local:            http://localhost:6006/
On your network:  http://192.168.0.173:6006/

    Under the hood, Storybook spun up a webpack server instance. Note that it’s using its own built-in configuration, not the webpack.config.js from the project root.

    Open the link to see the Storybook page. (In VS Code, you can open links shown in the integrated terminal by pressing ⌘ on macOS, and ⌃ on Windows and Linux.) You should see a nice welcome screen in your browser with a handy link to the Storybook documentation on writing stories.

  • To see the Carousel component on this page, replace the placeholder documentation in stories.index.js with your own:

Get hands-on with 1400+ tech skills courses.