Create your own design system! with Storybook React and TypeScript | Storybook 6 Crash Course

Have you ever though about creating your own design system or component library? This is the video for you. You mostly really need two things. First, a development environment which allows you create and design components in isolation. Second, the proper tooling to bundle and package your code!

In this video we are going to utilize Storybook JS to develop React JS component libraries or design systems. We're also going to use TSDX as our typescript tooling, it will help us get started quickly with zero configuration!

00:00 - Intro
02:18 - Installation and setup
05:27 - Creating a new component
08:00 - Creating our first story
13:47 - Templates for stories
16:17 - Controls
16:57 - Intro to addons
17:56 - Actions
19:44 - Docs page
22:43 - Overview of the rest of essential addons
24:42 - Installing a new addon (accesibility addon)
28:40 - Using MDX for Docs
37:27 - The idea behind storybook
38:58 - TSDX overview
39:28 - Building our code as a package to publish to npm
42:36 - Building a deployable static version of our storybook docs
44:30 - Wrap up summary
45:44 - Outro

[gavdev]

Perfect video for someone who knows react but has never made a package before. Love it

[AwakeningofAI]

this was precisely what I was looking for. great tutorial mate. neat and clean concepts.

[ya]

After searching for a while of this topic, you may be the only one who explain the doc section even with tsdx. Damn awesome, thank you dude.

[stevesmith]

I was looking for resources on creating a design system with React, this was the perfect video for it. Thanks alot!

[samueldusek]

Hi Marius, thanks for this video. It was exactly what I was looking for. Keep the good work. :)

[OliverKelso]

This is great man, thank you. I've recently been thrown into React and Storybook, coming from Vue. I was having a lot of trouble understanding what the real benefit of Storybook was, but this really cleared up a lot of questions I has having! Thanks!

[icutshapes]

Exactly what I was looking for. Thanks for introducing me to TSDX.

[andybliss]

Thanks for this nice video. I need this for my work. What's quite funny is you suddenly sound British like my when you pronounce 'Button'

[MrIgorii]

Noice man, so clear and well structured

[sergeykahnwald]

Storybook is a cool package) But there are some cases when we don’t need all the power of storybook, but just a simple “test page” with all our components where we can play with its props. There is one package that works just fine for this, called storybox-react

[fabbyptc]

Man, I have no words enought to thank you! You've saved me! I had to create a library for work and failed with all the tutorials I've tried. Your tutorial was the one that resolved my problem. Thanks a lot!

[johnddonnet]

Finally learnt how to correctly create a button :D

[devendrasaroj]

Got mdx running through this tsdx, otherwise with standard setup I was getting errors for mdx files. Thanks for tutorial.

[jaammmiiii]

Great tutorial! Thanks! Can you share your extension/settings for VSCode so it auto-formats (Prettier) on save? I've installed the MDX extension and while it does provide syntax highlighting, it doesn't help with formatting.

[AlEgorova]

Thanks for video! Github's repo would be helpful )))

[Gusfaria]

This is great. Thank you. Any ideas on how to structure the css? Is this on top of webpack?

[ap]

Thanks for the walkthrough 👍Have you managed to get mdx to be type safe when using typescript? Editor doesn't complain about errors, and build doesn't break when I pass an invalid value to a prop. This makes it pretty fragile. But I love the idea of using mdx

[shuaib-hasan-akib]

Hello Marius, great video. Please, make a project with React, TS, and Redux.

[skoizumi]

Thanks for detail video on storybook and react. When starting new application with the new style do we develop two react applications? One works with storybook and the other for real application?

[regilearn]

It would be grate if you can do a video adding material ui to this setup