storybook | frontend workshop for building UI components | Frontend Framework library

 by   storybookjs TypeScript Version: 8.1.0-alpha.8 License: MIT

kandi X-RAY | storybook Summary

kandi X-RAY | storybook Summary

storybook is a TypeScript library typically used in User Interface, Frontend Framework, Vue, Angular, React applications. storybook has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Build bulletproof UI components faster. Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Find out more at

            kandi-support Support

              storybook has a medium active ecosystem.
              It has 79118 star(s) with 8507 fork(s). There are 951 watchers for this library.
              There were 10 major release(s) in the last 6 months.
              There are 1546 open issues and 9381 have been closed. On average issues are closed in 927 days. There are 109 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of storybook is 8.1.0-alpha.8

            kandi-Quality Quality

              storybook has 0 bugs and 0 code smells.

            kandi-Security Security

              storybook has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              storybook code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              storybook is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              storybook releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.
              It has 1621 lines of code, 0 functions and 2022 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of storybook
            Get all kandi verified functions for this library.

            storybook Key Features

            No Key Features are available at this moment for storybook.

            storybook Examples and Code Snippets

            Put Condition to CASE expression (SQL)
            Lines of Code : 27dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            select distinct 
            From customers C
            Join sportsbook_bets S On S.customer_id = C.customer_id 
            where  (Select count(FB.bet_id) From sportsbook_bets FB where FB.customer_id = C.customer_id and FB.sport_name = 'football
            How to access resources in a Quarkus native image?
            JavaScriptdot img2Lines of Code : 81dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                "resources": [
                    "pattern": "Resource2.txt"
            InputStream resource = ModuleLayer.boot().findModule(moduleName).getResourceAsStream(resourcePath);
            Show a message if a text is copied successfully(alternative to alert)
            JavaScriptdot img3Lines of Code : 54dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Successfully Copied
            #snackbar {
              visibility: hidden;
              color: #fff;
              background-color: #333;
              min-width: 250px;
              margin-left: -125px;
              border-radius: 2px;
              padding: 16px;
              text-align: center;
            ngFor JSON array of object async await angular 13 not binding
            TypeScriptdot img4Lines of Code : 25dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
              users: any[] = [];
              ngOnInit() {
              loadUser() {
                  const sb = this.userService.getUsers().pipe(
                   catchError((errorMessage) => {
                    return of(EMPTY_UserProfile
            Joining multiple tables ORACLE
            Lines of Code : 19dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                INNER JOIN STORE as S
                on S.STOREID = SD.STOREID
                INNER JOIN MATERIAL as M
                LEFT JOIN STOREBIN as SB
                LEFT JOIN VENDOR as V
            Optimization of simple join query PostgreSQL
            Lines of Code : 9dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            SELECT b.price
            FROM book b 
            where b.author_id = 1 and 
              exists (select 1 from sold_book sb where = sb.book_id ) 
            order by b.price desc limit 1;
            create index on book (author_id, price, id);
            create index on sol
            Hibernate mapping: Get collection on runtime with nullSafeGet overrided method
            JavaScriptdot img7Lines of Code : 55dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
              public Object nullSafeGet(ResultSet rs, String[] names, SharedSessionContractImplementor session, Object owner) throws HibernateException, SQLException {
                String commaSeparatedValues = rs.getString(names[0]);
            Scanning line by line with Windows.Media.Ocr engine
            JavaScriptdot img8Lines of Code : 127dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Private Function transpose(input As String) As String
                Dim numberOfColumns = 4 ' this must be known and could be a parameter to this function
                Dim fixedInput = input.Replace(" KIBA", "|KIBA").Replace(" USDT", "|USDT")
                Dim splitIn
            Using Drawing to create a graphic verification code does not display
            JavaScriptdot img9Lines of Code : 45dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            public class CaptchaController : Controller
                public Object VerifyCode()
                    string code = "";
                    Bitmap bitmap = Captcha.CreateCaptcha(out code);
                    MemoryStream stream = 
            how to filtered higher score in javascript
            JavaScriptdot img10Lines of Code : 17dot img10License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const filterStudentsByMinScore = (students, minScore) =>
                .filter(({ score }) => score >= minScore)
                .sort(({ name: na, score: sa }, { name: nb, score: sb }) =>
                  sb - sa || na.localeCompare(nb));
            const st

            Community Discussions


            Storybook couldn't resolve fs
            Asked 2022-Mar-22 at 08:55

            I am setting up a Storybook with RemixJS. I got the following error when trying to import a component



            Answered 2022-Mar-11 at 12:09

            Depending on the webpack version you are using to build your Storybook you need to add fs, stream and other Node core module used by Remix packages.

            As a rule of thumb you can use the list from Webpack documentation on resolve.fallback here.

            If you are using Stroybook with Webpack 4 the config should look like :



            Styled Components adding component name as class name
            Asked 2022-Mar-16 at 13:21

            I'm using Preact with styled-components (storybook) and webpack to build my project

            I have a component called AlphaBarWrapper with a styled component inside of it called StyledAlphabar.

            Styled Components is adding AlphaBarWrapper_StyledAlphaBar-sc-[random string] as a classname to my component when rendered.

            I'd like this to be the standard sc-[random string] class name instead. I can't find any documentation on why it is rendering this.

            This occurs in both a standard webpack build and the storybook build, so I expect that there's an option that I'm missing.



            Answered 2022-Mar-16 at 13:21

            If i'm right understood your issue you need install babel-plugin-styled-components. Then in the root directory create .babelrc and put this code:



            Storybook override import method
            Asked 2022-Mar-10 at 16:36

            My component 'ReportWrapper' is something like below where it import 'getReportData' which in turn return data async.



            Answered 2022-Mar-07 at 08:02

            If I understand correctly you want to use a different getReportData in stories. I read this as mocking a module in stories.

            I managed to do this using Storybook's webpackFinal config and to add a webpack plugin - webpack's NormalModuleReplacementPlugin. Basically you can replace a module in stories using this approach.

            You could try this in your storybook config:



            Tailwind - Conditional class rendering
            Asked 2022-Feb-20 at 23:33

            I'm trying to play around with Reactjs, storybook and tailwind to create a custom UIUX library, but I cannot make work the conditional rendering of the classes, it won't work in the storybook at least (for any class, rounded, bg-color, color, etc), I cannot see any change and inspecting the CSS, no CSS is applied.


            The classes I'm trying to add are not concatenated, they are full class names such as "bg-red-500", "bg-green-600", etc.

            I have this code:



            Answered 2022-Feb-19 at 21:36

            I suspect there are 2 issues with your code.

            1st which i'm absolute certain is that you shouldn't concatenate tailwind classes because these classes can't be detected by tailwind therefore are not included in the compiled file. You can read more here.

            that said if you insist, you could safelist the classes you want to concatenate.

            and 2nd if regular classes are not working, then you should make sure all the files with tailwind classes are included in the content array in tailwind config file



            Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3
            Asked 2022-Feb-18 at 14:50

            I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions

            Current mismatch error is :



            Answered 2022-Feb-18 at 14:50

            My colleague solved it by moving to Vite. My suggestion would be to drop webpack and use Vite instead.

            Migration guide for Vue 2 to 3 here: Vuetify migration guide:



            Type Error: this.getOptions is not a function For style-loader
            Asked 2022-Feb-17 at 23:50


            While using Storybook, I am running npm run storybook and getting the error below.



            Answered 2021-Jul-29 at 17:17


            After taking a step back, I realized that I could try out what I did to fix the sass-loader issue: downgrading major versions.


            • Downgraded style-loader 1 major version to 2.0.0: npm i style-loader@2.0.0
            • Then, as luck would have it, I ran into the same issue with css-loader
            • Downgraded css-loader 1 major version to 5.2.7: npm i css-loader@5.2.7


            By downgrading all of the loaders one major version, I was able to get it to work.



            MUI v5 + Storybook: Theme and font family do not work in storybook
            Asked 2022-Feb-15 at 17:01

            I am facing an issue where the MUI theme works in codesandbox but not in storybook

            Demo to show it working WITHOUT storybook:

            Demo showing that it breaks WITH storybook Git repo:

            This is my component:



            Answered 2021-Dec-07 at 01:55

            Holy moly I fixed it. So apparently there is an incompability with Storybook <6.3 since it relies on @emotion/styled v10, while MUI v5 must use v11.


            This is how I fixed it



            Global SCSS style is no longer loaded in Storybook with Angular 12
            Asked 2022-Feb-14 at 10:46

            I am migrating a library to use Angular and Material 12 (currently in version 10), and Storybook is used to expose the various components of this library. To do so, I upgraded Angular and Material to version 12 with the Angular Update Guide, Storybook to version 6.3 with npx sb upgrade and I followed the steps described here to fully migrate Storybook and use webpack5.

            Unfortunately, the base.scss file previously included globally in the rendering of stories is no longer included (stories are now without any CSS). This base.scss file is included in a Typescript file with:

            import '!style-loader!css-loader!sass-loader!./base.scss';

            With Storybook 6.3 and Angular 10, everything works perfectly.

            To fix that, I tried to add this configuration in main.js, as it is described in the documentation:



            Answered 2021-Oct-15 at 14:38

            I have answered my question. In fact there was no need to change the webpack configuration for my case. It was enough to add the @storybook/preset-scss addon.

            The problem was described here. I needed to downgrade Angular to 12.1 version. I was in 12.2.

            Hopefully this helps someone.



            Storybook error when using Webpack5 with Next.JS app + Typescript
            Asked 2022-Feb-08 at 19:42

            I am trying to set up a fresh next.js app using Typescript and Storybook.

            Following some guides online gets me fairly close but I note that the rendered 'HomePage' story is missing styling

            compared with what I get when I simply run



            Answered 2022-Feb-08 at 19:42

            Found the answer here ->

            The solution is simply to add the following to .storybook\main.js



            NPM CI error bindings not accessible from watchpack-chokidar2:fsevents
            Asked 2022-Feb-02 at 12:53

            When I run npm ci on Github Actions I got the error:



            Answered 2021-Sep-20 at 20:57

            Solved removing packages-lock.json and running again using NodeJS 14 (was 10)


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install storybook

            Visit Storybook's website to learn more about Storybook, and to get started.


            Documentation can be found Storybook's docs site.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i storybook

          • CLONE
          • HTTPS


          • CLI

            gh repo clone storybookjs/storybook

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link