# Add Storybook to Gatsby project
[Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
---
Install TypesScript + babel plugins and presets
---
Install Storybook React NPM packages and addons
---
Create custom Storybook webpack config (main.js)
---
Configure Storybook / Gatsby Link settings (preview.js)
---
Create example Link stories
---
Add Storybook npm scripts
---
## You're all done!
Before your run Storybook make sure you run `gatsby develop` or `gatsby build`. This ensures that Gatsby's GraphQL data is available in Storybook.