{"id":31296,"date":"2024-09-05T04:39:47","date_gmt":"2024-09-05T11:39:47","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=31296"},"modified":"2024-09-05T04:40:30","modified_gmt":"2024-09-05T11:40:30","slug":"storybook-examples","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/","title":{"rendered":"These Storybook Examples Will Inspire Your Component Library"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min-1024x512.png\" alt=\"Browse these Storybook examples min\" class=\"wp-image-45130\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Now that<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/try-storybook-integration-design-with-code\/\" target=\"_blank\" rel=\"noreferrer noopener\"> UXPin has a Storybook integration<\/a> that breaks down design-dev inconsistencies and makes it easier than ever to manage your UI components library, you might want to take some time to look at Storybook examples.<\/p>\n\n\n\n<p>Plenty of world-renowned websites use Storybook. Look at some of the best Storybook examples that you can use as inspiration for developing your digital products.<\/p>\n\n\n\n<p>Take UI components directly from Storybook and import them to UXPin. Design interactive and visually stunning layouts without extensive design skills. <a href=\"https:\/\/uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <h3 class=\"discover-merge__heading\">Design UI with code-backed components.<\/h3>\n            <p class=\"discover-merge__text\">Use the same components in design as in development. Keep UI consistency at scale.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Try UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is Storybook?<\/h2>\n\n\n\n<p>Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and other frameworks. It allows developers to build, test, and document components in a standalone environment outside of the main application, promoting better modularity and reusability.<\/p>\n\n\n\n<p>It enhances the efficiency of UI development by providing a focused environment for creating, testing, and documenting UI components, making it easier for developers to build consistent and robust user interfaces.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bbc-iplayer-web\">BBC iPlayer Web<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/BBC-Storybook-example-1024x397.png\" alt=\"BBC Storybook example\" class=\"wp-image-48872\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/BBC-Storybook-example-1024x397.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/BBC-Storybook-example-700x271.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/BBC-Storybook-example-768x298.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/BBC-Storybook-example-1536x596.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/BBC-Storybook-example-2048x794.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>BBC iPlayer Web switched to Storybook when it needed more custom components. Preview their Storybook here: <a href=\"https:\/\/www.bbc.co.uk\/iplayer\/storybook\/index.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">BBC iPlayer Storybook<\/a>.<\/p>\n\n\n\n<p>A growing number of movie and television show producers now have streaming platforms that let people watch specific content when they like. <a href=\"https:\/\/www.bbc.co.uk\/iplayer\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">BBC iPlayer Web<\/a> makes it incredibly easy for viewers to find specific types of content by title, category, or topic.<\/p>\n\n\n\n<p>When the streaming service started, it built its back end with Node.js. It didn\u2019t take long, though, before the development team decided to make the migration to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/react-rapid-prototyping\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a>. React components were an obvious improvement as the platform grew.<\/p>\n\n\n\n<p>Around 2019, though, the team realized that its approach didn\u2019t work as well as expected. The UX professionals and developers didn\u2019t have a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/single-source-truth-benefits\/\" target=\"_blank\" rel=\"noreferrer noopener\">common language<\/a> that helped them work toward goals. They also found it difficult to locate the components they needed to add content and update the website&#8217;s appearance.<\/p>\n\n\n\n<p>Ultimately, the BBC iPlayer Web team realized that they were spending way too much time maintaining their <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">component library<\/a>.<\/p>\n\n\n\n<p>Storybook became a significant tool that helped them address these problems.<\/p>\n\n\n\n<p>BBC iPlayer Web has a <a href=\"https:\/\/www.bbc.co.uk\/iplayer\/storybook\/index.html?path=\/story\/style-guide--colours\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">public design system<\/a>, so you can look at it to learn a few tricks and find inspiration when you feel stuck on a project.<\/p>\n\n\n\n<p>The design system includes everything from <a href=\"http:\/\/gel-icon-alert\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">iconography<\/a> to <a href=\"https:\/\/www.bbc.co.uk\/iplayer\/storybook\/index.html?path=\/story\/components-navigation--navigation\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">navigation<\/a>.<\/p>\n\n\n\n<p>Spend some time browsing <a href=\"https:\/\/www.bbc.co.uk\/iplayer\/storybook\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">BBC iPlayer\u2019s Storybook example<\/a>. Then, visit the website. You will immediately see how the designers and developers combined components to create a tool that works exceptionally well for viewers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/bbc-storybook-example-2-min-1024x596.png\" alt=\"bbc storybook example 2 min\" class=\"wp-image-45135\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/bbc-storybook-example-2-min-1024x596.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/bbc-storybook-example-2-min-515x300.png 515w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/bbc-storybook-example-2-min-768x447.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/bbc-storybook-example-2-min.png 1486w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong><em>Related reading: <\/em><\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Top 9 Design System Examples<\/em><\/strong><\/a><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-guardian\"><strong>The Guardian<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/guardian-storybook-1024x542.png\" alt=\"guardian storybook\" class=\"wp-image-48876\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/guardian-storybook-1024x542.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/guardian-storybook-567x300.png 567w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/guardian-storybook-768x406.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/guardian-storybook-1536x812.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/guardian-storybook-2048x1083.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><em>The Guardian<\/em> publishes a tremendous number of articles daily. It\u2019s often one of the first news outlets to report on breaking news. It also has frequent articles about sports, culture, and lifestyle topics. Considering that <em>The Guardian<\/em> covers events all over the world, it needs a fast, reliable way to turn written text into published web pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"756\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-examples-min-1024x756.png\" alt=\"guardian storybook examples min\" class=\"wp-image-45137\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-examples-min-1024x756.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-examples-min-406x300.png 406w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-examples-min-768x567.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-examples-min.png 1051w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Guardian Storybook components library (<a href=\"https:\/\/5dfcbf3012392c0020e7140b-gmgigeoguh.chromatic.com\/?path=\/story\/layouts-standard--photo-essay-story\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">access the Guardian Storybook here<\/a>) streamlines the design and publication process. Building the design system, however, must have taken quite a bit of time because it includes every component that the well-designed website could possibly need. It even features slightly different versions of designs. For example, the <a href=\"https:\/\/5dfcbf3012392c0020e7140b-gmgigeoguh.chromatic.com\/?path=\/story\/components-captionblockcomponent--standard-article\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CaptionBlockComponent Story<\/a> includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>with defaults<\/li>\n\n\n\n<li>PhotoEssay using html<\/li>\n\n\n\n<li>when padded<\/li>\n\n\n\n<li>with width limited<\/li>\n\n\n\n<li>with credit<\/li>\n\n\n\n<li>when overlayed<\/li>\n<\/ul>\n\n\n\n<p>No matter what type of caption block the designers want to include, they just have to search the component library, choose the correct option, and add text for the specific story.<\/p>\n\n\n\n<p>The design team even created multiple donut graphs to fit unique circumstances.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"995\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-donut-graphs-min.png\" alt=\"guardian storybook donut graphs min\" class=\"wp-image-45139\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-donut-graphs-min.png 995w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-donut-graphs-min-700x211.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/guardian-storybook-donut-graphs-min-768x232.png 768w\" sizes=\"auto, (max-width: 995px) 100vw, 995px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Of course, The Guardian<em> <\/em>also maintains designs that help readers identify what type of content they\u2019re reading.<\/p>\n\n\n\n<p>A Review headline doesn\u2019t look the same as a Photo Essay headline.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"215\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/accessibile-headlines-with-storybook-min.png\" alt=\"accessibile headlines with storybook min\" class=\"wp-image-45141\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/accessibile-headlines-with-storybook-min.png 927w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/accessibile-headlines-with-storybook-min-700x162.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/accessibile-headlines-with-storybook-min-768x178.png 768w\" sizes=\"auto, (max-width: 927px) 100vw, 927px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Again, it took a lot of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-rodmap\/\" target=\"_blank\" rel=\"noreferrer noopener\">effort to build this Storybook design system<\/a>. Now that <em>The Guardian<\/em> editors and publishers have it, though, they can quickly publish coherent content that keeps readers informed without misdirecting them.<\/p>\n\n\n\n<p>Here&#8217;s a great video about <a href=\"https:\/\/www.youtube.com\/watch?v=aI5WzvRobaE\" target=\"_blank\" rel=\"noreferrer noopener\">The Guardian&#8217;s Storybook component library<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Storybook at the Guardian by Oliver Barnwell | Storybook Day 2023\" width=\"660\" height=\"371\" src=\"https:\/\/www.youtube.com\/embed\/aI5WzvRobaE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ibm-s-carbon-design-system-in-storybook\"><strong>IBM<\/strong>&#8216;s Carbon Design System in Storybook<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"380\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ibm-storybook-example-of-component-library-1024x380.png\" alt=\"ibm storybook example of component library\" class=\"wp-image-48879\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ibm-storybook-example-of-component-library-1024x380.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ibm-storybook-example-of-component-library-700x260.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ibm-storybook-example-of-component-library-768x285.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ibm-storybook-example-of-component-library-1536x571.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/ibm-storybook-example-of-component-library-2048x761.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Carbon, the design system used by IBM, primarily gets used to build digital products with specific functions, such as adding files to a project, submitting reports, and tracking an activity\u2019s progress. IBM uses Carbon for internal and external products, so you might recognize some of the components in the<a href=\"https:\/\/angular.carbondesignsystem.com\/?path=\/story\/components-progress-indicator--basic\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> Storybook UI design system<\/a>.<\/p>\n\n\n\n<p>This Storybook example contains <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/atomic-ui-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">countless components<\/a>. You\u2019ll find everything from tabs to pagination. The company just wants to make sure that it has functional tools that share an aesthetic.<\/p>\n\n\n\n<p>The components in Carbon\u2019s design system also tend to have extensive Stories that let coders make subtle changes when necessary.<\/p>\n\n\n\n<p>Even the Basic Checkbox component has 184 lines of JavaScript code in its <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-args-story\/\" target=\"_blank\" rel=\"noreferrer noopener\">Story<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"168\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/carbon-checkbox-examples-of-storybook-min.png\" alt=\"carbon checkbox examples of storybook min\" class=\"wp-image-45143\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"407\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/example-of-storybook-story-min.png\" alt=\"example of storybook story min\" class=\"wp-image-45145\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/example-of-storybook-story-min.png 975w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/example-of-storybook-story-min-700x292.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/example-of-storybook-story-min-768x321.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>A significant advantage of using Storybook is that designers and developers can <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-storybook-helps-developers-with-design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">see how components respond to interactions<\/a>.<\/p>\n\n\n\n<p><em>Three interactions with the select button:<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"881\" height=\"158\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/interactions-storybook-min.png\" alt=\"interactions storybook min\" class=\"wp-image-45147\" style=\"width:750px;height:undefinedpx\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/interactions-storybook-min.png 881w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/interactions-storybook-min-700x126.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/interactions-storybook-min-768x138.png 768w\" sizes=\"auto, (max-width: 881px) 100vw, 881px\" \/><\/figure>\n\n\n\n<p>The designer or developer can see all of these <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactions<\/a> result from within the same environment. They don\u2019t need to export it to a prototyping app or add it to a designing app. The interactions happen right there to save time and meet expectations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Salesforce Lightning Design System for React<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-1024x635.png\" alt=\"Storybook example\" class=\"wp-image-52396\" style=\"width:750px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-1024x635.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-484x300.png 484w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-768x477.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-1536x953.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-2048x1271.png 2048w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.05.30-290x180.png 290w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can also find a Storybook with components of one of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">best design systems<\/a> \u2013 Salesforce Lightning. This design system is based in React,  a JavaScript library, which is commonly used for building user interfaces. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-react\/\" target=\"_blank\" rel=\"noreferrer noopener\">React is a popular front-end library<\/a> developed by Facebook that allows developers to create interactive and dynamic UI components.<\/p>\n\n\n\n<p>When we talk about React in the context of design systems, it usually means using React to implement the components and design guidelines provided by the design system.<\/p>\n\n\n\n<p>By leveraging the Salesforce Design System, developers and designers can create applications that not only look great but also provide a consistent and intuitive user experience, ultimately leading to increased user satisfaction and productivity. Additionally, adherence to the design system ensures compatibility and seamless integration with other Salesforce products and services.<\/p>\n\n\n\n<p>Salesforce Lightning Design System was created to be framework agnostic, yet it is still compatible with other front-end frameworks, and developers have the flexibility to choose the technology stack that best suits their needs and preferences.<\/p>\n\n\n\n<p>This <a href=\"https:\/\/storybook.js.org\/showcase\/salesforce-lightning-design-system-for-react\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook example<\/a> is based on React and it has <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI components<\/a> such as a data table, checkbox, button, card, carousel, and more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Audi UI React<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"297\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.13.53-1024x297.png\" alt=\"Audi Storybook Example\n\" class=\"wp-image-52399\" style=\"width:760px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.13.53-1024x297.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.13.53-700x203.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.13.53-768x222.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.13.53-1536x445.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.13.53-2048x593.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Another React-based Storybook is a design system by Audi. Crafted with precision, the Audi Design System serves as the ultimate beacon of truth for our global teams dedicated to crafting Audi&#8217;s finest offerings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"382\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.14.50-1024x382.png\" alt=\"Audi Storybook components example\" class=\"wp-image-52402\" style=\"width:750px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.14.50-1024x382.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.14.50-700x261.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.14.50-768x287.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.14.50-1536x574.png 1536w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/03\/Zrzut-ekranu-2024-03-15-o-12.14.50-2048x765.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>From insightful Getting Started guides to indispensable Core Components, this Storybook example empowers every team member, ensuring a unified approach across all Audi products worldwide. The Audi Design System embodies the essence of precision, innovation, and seamless collaboration that the design team at Audi chose as its defining qualities.<\/p>\n\n\n\n<p>It sets the standard for design systems in the automotive industry and beyond. <a href=\"https:\/\/storybook.js.org\/showcase\/audi-ui-react\" target=\"_blank\" rel=\"noreferrer noopener\">Check out its Storybook<\/a> to see for yourself. It has navigational, input, text, and many other useful components.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. What is Storybook used for?<\/h3>\n\n\n\n<p>Storybook is an open-source tool used for developing, testing, and documenting UI components in isolation. It provides a sandbox environment where developers can create and showcase components independently from the main application. This helps in building components that are reusable, consistent, and well-documented.<\/p>\n\n\n\n<p>Storybook is particularly useful in the development of design systems and component libraries, as it allows developers to visualize and interact with components outside the context of the application, ensuring they function correctly and look as expected. It also supports a range of add-ons for accessibility, responsive design, and performance testing, making it a versatile tool for front-end development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. What are some advanced Storybook examples?<\/h3>\n\n\n\n<p>Advanced Storybook examples demonstrate the tool&#8217;s capability to handle more complex scenarios and enhance the development experience. Here are a few examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Component Interactions<\/strong>: Using Storybook&#8217;s Controls add-on, you can create interactive components that respond to user input directly in the Storybook UI. This is useful for testing props and states dynamically.<\/li>\n\n\n\n<li><strong>Composite Components<\/strong>: Showcase components that are composed of multiple child components, such as a form with inputs, buttons, and validation messages. This helps in understanding how components work together in a real-world context.<\/li>\n\n\n\n<li><strong>Data Fetching and Mocking<\/strong>: Demonstrate how components behave with data fetching by using tools like MSW (Mock Service Worker) to mock API requests within Storybook. This is particularly useful for testing components that depend on external data sources.<\/li>\n\n\n\n<li><strong>Theming and Styling<\/strong>: Create stories that demonstrate how components adapt to different themes or styles. This is especially useful for design systems that support dark and light modes or multiple branding themes.<\/li>\n\n\n\n<li><strong>Accessibility Testing<\/strong>: Use the a11y add-on to automatically check for accessibility issues in your components and display the results directly in Storybook. This ensures your components are usable for all users, including those with disabilities.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. What are public Storybooks?<\/h3>\n\n\n\n<p>Public Storybooks are Storybook instances that are accessible to the public over the internet. They are typically hosted on platforms like GitHub Pages, Netlify, or Vercel, allowing anyone to view and interact with the documented UI components. Public Storybooks are often used by companies and open-source projects to showcase their component libraries or design systems, providing developers and designers with a comprehensive reference for how each component should look and behave.<\/p>\n\n\n\n<p>By sharing a public Storybook, teams can improve collaboration, provide clear documentation, and promote consistency across different projects. Public Storybooks are also valuable for onboarding new team members and for providing external contributors or users with insights into the UI components available within a project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. What is the difference between Storybook for React and Storybook for Angular?<\/h3>\n\n\n\n<p>Storybook is a versatile tool that supports multiple frameworks, including React and Angular, but the way it integrates and functions with each framework can differ slightly due to the inherent differences between React and Angular themselves.<\/p>\n\n\n\n<p>Nevertheless, the core purpose of Storybook remains the same across both frameworks: to provide a powerful environment for developing, testing, and documenting UI components in isolation. Both Storybook for React and Storybook for Angular offer robust features that cater to the unique needs of their respective frameworks, ensuring that developers can maintain a consistent and efficient workflow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. How can I use Storybook with UXPin Merge?<\/h3>\n\n\n\n<p>Using Storybook with UXPin Merge allows you to import your React components directly from Storybook into UXPin, enabling a seamless integration between design and development. This integration ensures that designers are working with the exact same components that developers are using in production, leading to more accurate and efficient design processes. Here&#8217;s how you can use Storybook with UXPin Merge:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Set Up Storybook<\/strong>: Ensure that your React components are documented and organized in Storybook. You should have a well-structured Storybook instance with all the components you want to use in UXPin.<\/li>\n\n\n\n<li><strong>Sync Components<\/strong>: Integrate Storybook with UXPin and use UI components in your UXPin design projects, allowing designers to drag and drop components into their prototypes while maintaining full functionality and interactivity.<\/li>\n\n\n\n<li><strong>Design and Iterate<\/strong>: With the components imported from Storybook, designers can create high-fidelity prototypes in UXPin that are consistent with the development environment. This integration helps streamline the design-to-development workflow, reducing the risk of inconsistencies and ensuring that both teams are aligned.<\/li>\n<\/ol>\n\n\n\n<p>Using Storybook with UXPin Merge is a powerful way to bridge the gap between design and development, ensuring that your UI components are consistent, reusable, and accurately represented across all stages of product development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-try-uxpin-merge-and-storybook-integration-for-fast-prototyping\">Try UXPin Merge and Storybook integration for fast prototyping<\/h2>\n\n\n\n<p>Use Storybook components to build interactive prototypes 8.6x faster than with vector-based tools like Figma. Import them to UXPin via our integration with Storybook and build products quickly. UXPin Merge\u2019s Storybook integration lets you <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" target=\"_blank\" rel=\"noreferrer noopener\">import your components<\/a> within one minute. It doesn\u2019t even require any technical knowledge, especially when you maintain a public Storybook design system. <a href=\"https:\/\/www.uxpin.com\/merge\/developers\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">Try UXPin Merge<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Now that UXPin has a Storybook integration that breaks down design-dev inconsistencies and makes it easier than ever to manage your UI components library, you might want to take some time to look at Storybook examples. Plenty of world-renowned websites use Storybook. Look at some of the best Storybook examples that you can use as<\/p>\n","protected":false},"author":3,"featured_media":45130,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,441,172],"tags":[],"class_list":["post-31296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-front-end","category-product-design"],"yoast_title":"5 Storybook Examples from the Best Products","yoast_metadesc":"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Storybook Examples from the Best Products<\/title>\n<meta name=\"description\" content=\"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"These Storybook Examples Will Inspire Your Component Library\" \/>\n<meta property=\"og:description\" content=\"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-05T11:39:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-05T11:40:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"These Storybook Examples Will Inspire Your Component Library\",\"datePublished\":\"2024-09-05T11:39:47+00:00\",\"dateModified\":\"2024-09-05T11:40:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/\"},\"wordCount\":2009,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Browse-these-Storybook-examples-min.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Front-End\",\"Product Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/\",\"name\":\"5 Storybook Examples from the Best Products\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Browse-these-Storybook-examples-min.png\",\"datePublished\":\"2024-09-05T11:39:47+00:00\",\"dateModified\":\"2024-09-05T11:40:30+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Browse-these-Storybook-examples-min.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Browse-these-Storybook-examples-min.png\",\"width\":1200,\"height\":600,\"caption\":\"Browse these Storybook examples min\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/storybook-examples\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"These Storybook Examples Will Inspire Your Component Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Storybook Examples from the Best Products","description":"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/","og_locale":"en_US","og_type":"article","og_title":"These Storybook Examples Will Inspire Your Component Library","og_description":"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-05T11:39:47+00:00","article_modified_time":"2024-09-05T11:40:30+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"These Storybook Examples Will Inspire Your Component Library","datePublished":"2024-09-05T11:39:47+00:00","dateModified":"2024-09-05T11:40:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/"},"wordCount":2009,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png","articleSection":["Blog","Design Systems","Front-End","Product Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/","name":"5 Storybook Examples from the Best Products","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png","datePublished":"2024-09-05T11:39:47+00:00","dateModified":"2024-09-05T11:40:30+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Are you struggling to make a component library that fits your needs? These Storybook examples will get you started.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Browse-these-Storybook-examples-min.png","width":1200,"height":600,"caption":"Browse these Storybook examples min"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/storybook-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"These Storybook Examples Will Inspire Your Component Library"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=31296"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31296\/revisions"}],"predecessor-version":[{"id":54399,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/31296\/revisions\/54399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/45130"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=31296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=31296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=31296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}