Introducing Storybook for Teams
Storybook to the rescue
Creating durable UI is hard: a flaming juggle of state management, business logic, styling rules, responsiveness, browser support, evolving tools, flaky APIs, dependency graphs, etc. Now try to stay on top of that over time 🔥
Fortunately, in recent years, Storybook has quietly begun to revolutionize UI development. The open-source project is now used by over 30,000 projects, including brands like Shopify, IBM, Salesforce, and Airbnb. With zero-configuration integration with popular frameworks and the ability to develop and test UI components in isolated environments, it’s no wonder developers have flocked to it.
But why should developers have all the fun? For the first time, Storybook for Teams puts your Storybooks within reach for every teammate. Whether a designer, product manager, UX researcher, or marketer — everyone on your team can securely log in and access your latest UI source of truth.
Storybook, now for your whole team
Why would the rest of your team want to use Storybook? A few crackling reasons: It’s a component explorer, QA playground, development workbench, demo environment, prop documentation, usage examples, and much more depending on what else you add on. When you consider the communication overhead reduction of rallying your entire team around Storybook as a source of truth, the implications are staggering. If only it were easy to use in a whole-team setting…
Everyone on the same page(s)
How does Storybook for Teams work?
- Create an account
- Connect your team’s GitHub organization(s)
- Voila! all of your Storybooks and all of their branches, always up-to-date
- Invite your teammates to your secure team dashboard for ongoing collaboration
Note the lack of tango’ing with a terminal! We’ve done a lot of work to make the initial setup a pain-free experience. Behind the scenes, Storybook for Teams utilizes a state-of-the-art continuous integration pipeline — building feature-branches every time a developer pushes a git commit. Imagine Travis-CI but for UI components.
Designing a new feature? Explore your team’s UI component vocabulary and get a feel for how each one consumes data in the real world. Crank out new UI designs with speed and confidence in how your work will snap into your app.
Want to reference your component designs from Figma, Abstract (Sketch and Adobe XD) within Storybook? Storybook Addons have you covered there as well.
Have you developed an upgraded version of a component? Push your changes to a new branch and send a link to your designers and PMs for visual review and sign-off. With deep-linking to components on specific branches, your team always has an up-to-date, universal reference point for discussion. Everyone stays in sync with production code.
The next chapters
Storybook for Teams is built & maintained by Haiku, where we’re working to connect creators of software with tools that bridge long-standing gaps in collaboration.
UI components
at everyone’s fingertips —
teamwork paradise
What’s next? In the near term, we’ll be releasing new features to make collaboration more streamlined and efficient. Give us a shout @haikuforteams and let us know what you’d like to see!
Soon we’re releasing a powerful set of commenting features — to enable designers, developers, and PMs to give feedback on specific components on specific branches. No more tracking down UI feedback over multiple platforms & design files or painstakingly communicating reproduction instructions.
What about the medium-term? You may have seen another project from the Haiku team: Diez, the design language framework. Wouldn’t it be nice for Storybook to have first-class support for design tokens? What about support for native UI components?
Keep your eyes peeled over the months to come. We’re just getting started.
