storybook integration

Design faster with Storybook components

Keep your UI components interactive and work with all frameworks (React, Vue, and more). Integrate in less than 1 minute. Yes, it's that simple and powerful.

Try it now Get guided tour

Frameworks supported with storybook integration

Design with code components

Integrate UXPin + Storybook

  • Design with code components.
    Design with code components. Just paste your Storybook link in our integration box, et voila! You’re good to start designing prototypes with Storybook components.
  • Production-ready and interactive.
    Production-ready and interactive. Just drag & drop your already-interactive components on the canvas! Then, devs will use the same Storybook components to create the final product and maintain exceptional user experience.
  • Focus on what matters.
    Focus on what matters. Your component library in UXPin synced with Storybook.js will save you time to think about what really matters in product design.

Break down the silos

Join the Revolution

  • Keep component library in sync.
    Keep component library in sync. As all UI components come from Storybook, they will get updated automatically the moment a dev changes the components’ code. So, you can share a single source of truth at every stage of creating a user interface.
  • Public or private Storybook?
    Public or private Storybook? You can easily integrate with both: open source or private Storybook. Keep your components secure with token-based verification and manage access in your product team.
  • Adjust the components.
    Adjust the components. Customize the copy, colors or styles of a UI component right away. All changes applied will always be in line with the company's design system, so don’t worry about keeping the product team updated.

The only tool that takes interactive components from Storybook to design editor.

Use Storybook.js integration done right. Bring interactive components from Storybook. Not the other way round.

Try it now

We're here to make sure you're getting the most of our product and Storybook integration. If you're interested in a guided tutorial, please let us know.

We protect your data with care – just as described in Privacy Policy.

Want to design with components from Git Repo instead?

Merge lets your designers and developers use the same code-powered components to build products hand in hand in UXPin. Sync design components directly with Git repository and design products that meet production standards from the very beginning. Scale and develop – faster than ever. Learn more on how to design with code components.

We synced our Microsoft Fluent design system with UXPin's design editor via Merge technology.
It was so efficient that our 3 designers were able to support 60 internal products and over 1000 developers.

Erica Rider, UX Architect and Design Leader, <b>PayPal</b>

Erica Rider, UX Architect and Design Leader, PayPal