Skip to main content
All CollectionsComponents in ZeplinStorybook Integration
Connecting your Storybook instance with Zeplin
Connecting your Storybook instance with Zeplin

Learn how to connect your Storybook instance with Zeplin

Didem avatar
Written by Didem
Updated over a week ago

With the revamped Storybook integration of Zeplin, you can easily link your components in Zeplin to Storybook.

To connect your Storybook instance with Zeplin, head over to the project/styleguide dashboard and click on the “Connect” button revealed when hovering over the Storybook option under the Integrations section on the right panel.

Then, you'll see a modal opening up and asking for your Storybook instance's URL. You can put your URL into the textbox there and click on the “Continue” button.

☝️ You can use a localhost URL too, but note that stories won't be available for your team members if you use a localhost URL. We recommend you move your instance to somewhere accessible to collaborate with your team.

After linking your stories with a URL, you’ll be navigated to the Storybook integration page to start linking your components in Zeplin with stories in Storybook.

If you’re using the Zeplin Web app or the Mac app version 10.0.0 or up, you need to install Zeplin’s Storybook addon to connect with Storybook. You can run the following command on your Storybook instance to install the addon: npm i --save-dev storybook-zeplin

If you already have this addon installed on your instance, you can run the following command to update it: npm i --save-dev storybook-zeplin@latest

If you experience any issues while setting up the integration, you can visit the Troubleshooting tips for Storybook integration article.


Related articles

Did this answer your question?