How to Configure the Sidebar | Storybook Quick Tip

Master your sidebar organization with ‪@chantastic‬!

CHAPTERS
00:00 How to organize the Storybook Sidebar
00:19 The wrong way…
00:46 Make categories look like folders
01:40 Order categories with storySort
02:43 Warning: order is case-sensitive
02:57 Order nested folders and components
03:35 Warning: the order API is confusing
04:07 Order stories by changing the module export order
04:42 Tip: Docs are always first
04:48 Sort stories alphabetically
05:45 Tip: Alphabetic order isn't my favorite…
06:15 Take complete control with a custom storySort function
06:53 Warning: storySort is not supported by parameter inheritance
07:06 Remember: Restart after every change to the .storybook directory
07:32 Learn more about naming…

LINKS
Naming components https://storybook.js.org/docs/react/w...
Sidebar & URLS configuration https://storybook.js.org/docs/react/c...
Storybook at https://learnstorybook.com/
Storybook addons at https://storybook.js.org/addons
Component driven UI development at https://www.componentdriven.org/

SOCIALS
Discord:   / discord  
Twitter:   / storybookjs  
GitHub: https://github.com/storybookjs/storybook

Follow chantastic:
YouTube: ‪@chantastic‬
Twitter:   / chantastic  

OFFER
Get a $500 credit for automated visual testing. Signup to Chromatic with promo code DAY.