Storybook is a go-to repository for component-driven development teams where they can build UI components and pages in isolation—streamlines UI development, testing, and documentation.

Zeplin’s Storybook integration lets you link Zeplin components to stories in Storybook easily. Once it’s set up, you can access Storybook code snippets and documentation across screens and components within Zeplin.

It doesn’t matter if you work with React, Vue, or Angular; the integration supports all 15 frameworks that Storybook does! 🎉

To start using the Zeplin <> Storybook integration, all you need is an up and running Storybook instance and a Zeplin styleguide with the same components in Storybook. You’ll be using the URL of your Storybook instance to connect with Zeplin.

You can check this video of Yann, a Senior Frontend Engineer at Chromatic & Storybook Maintainer, to see how your development team can maintain a stronger connection between design and code, improve communication, avoid rework, and better estimate the time required for work:

☝️ Zeplin also supports connecting components in Storybook using CLI. If you've used Zeplin’s CLI to connect your components previously, your links for these components will also be available in Zeplin with the new Storybook integration.

The new Storybook integration allows you to connect your components with a graphical interface—no need to use Zeplin's CLI. Check out this article to learn more.

💁‍♀️ If you have any questions or suggestions, reach out to us from the chat bubble below—we're happy to help!

Next up:

Related articles:

Keywords: storybook.js, chromatic