Sitemap
Storybook

Frontend workshop for building UI components and pages in isolation

Follow publication

Storybook 4.0 is here!

5 min readOct 29, 2018

--

Storybook supports six new view layers

Faster builds with Webpack4 and Babel7

. Storybook is now compatible with popular frontend tools like create-react-app 2, Gatsby 2, and Next 7.

“Yay the migration is done and everything is working great! Also noticed some crazy perf wins with this, tell everyone I said this is amazing!“ — Josh Callendar, Lyft

First-class support for React Native

⚛️The new React Native device view
led the effort on React Native for Storybook 4.0. He documents the changes in detail in his post.

Theme Storybook to your liking

Dark theme for Storybook, available in 4.0
introduced theming, which allows you to tweak styling to match your brand.

Develop mobile webapps easier

Storybook mobile view

Story parameters API

.

storiesOf('My component', module)
.add('story1', withNotes('some notes')(() => <Component ... />))
.add('story2', withNotes('other notes')(() => <Component .../>))
// .storyook/config.js (global decorator, local also supported)
addDecorator(withNotes)
// Component.stories.js
storiesOf('My component', module)
.add('story1', () => <Component />, { notes: 'some notes' })
.add('story2', () => <Component />, { notes: 'other notes' })

Upgrade to Storybook 4.0

cd my-project
npx -p @storybook/cli sb init
yarn storybook

Get involved

Thank you! @a-tokyo @adekbadek @ailrun @alanhogan @andyo729 @astrotim @bastienfp @bmson @br0ken- @brian-mcbride @brycemhammond @camel-floss @choznerol @clehnert-psl @cliedeman @connorholyday @cortopy @danielduan @denzenin @desfero @dimitrijemanic @dioxmio @do7be @domyen @donaldpipowitch @edward1224 @ekhaled @elob @ewolfe @expe-lbenychou @faun @fibo @fran-worley @fvilers @gabrielcsapo @georgewl @glazy @gongreg @grimones @gromchen @hisapy @hypnosphi @ianvs @igor-dv @ikesyo @isoppp @j-kallunki @jalilarfaoui @jamesgorrie @jayphelps @jbaumgardt @jfsiii @jh3y @jhswart @jmiazga @jondot @juhq @keraito @klimentru1986 @kroeder @kumarharsh @langri-sha @libetl @ljharb @lucidpaper @luisdanielroviracontreras @lvarayut @manuel-magnetix @markelog @marob @marshallmick007 @martinmacko47 @meesvandongen @michaelduminy @mizx @mnicole @mrmckeb @mshaaban088 @mvasin @ndelangen @nemodreamer @nm123github @noriste @paradoxxxzero @pascalduez @pelotom @phillduffy @pksunkara @plsr @plumpnation @primigenus @rantelo @rhalff @rwieruch @sanpochew @shilman @silencerweb @sky-franciscogoncalves @skywhale @stephanemw @stijnkoopal @swernerx @swese44 @thekashey @thomasbertet @timothymclane @titonobre @tkh44 @tmeasday @tobilen @tombyrer @tretuna @tsiq-swyx @unional @urikphytech @vertexbz @vidaaudrey @wearymonkey @web-devel @westandy-dcp @wuweiweiwu @yaodingyd @yi-ge @yogu @zgreen

--

--

Storybook
Storybook

Published in Storybook

Frontend workshop for building UI components and pages in isolation

Michael Shilman
Michael Shilman

Written by Michael Shilman

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️

Responses (3)