Storybook
@storybookjs
Followers
24,346
Following
419
Media
1,331
Statuses
6,472
/** Open Source UI Development Maintained by @chromaticcom */
npx storybook@latest init
Joined May 2017
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
オーロラ
• 508456 Tweets
Joost
• 344098 Tweets
Forest
• 116459 Tweets
#الهلال_الحزم
• 113550 Tweets
الدوري الاقوي
• 63224 Tweets
Modric
• 59387 Tweets
Ali Koç
• 49697 Tweets
Dremo
• 44621 Tweets
الدوري السعودي
• 43442 Tweets
Burnley
• 36022 Tweets
Granada
• 35004 Tweets
الدوري التاريخي
• 31098 Tweets
Brahim
• 30419 Tweets
Arda Güler
• 27114 Tweets
Luton
• 24332 Tweets
#NfoChe
• 22037 Tweets
Aina
• 21125 Tweets
#الدوري_الاقوي_في_التاريخ
• 18018 Tweets
DiniKonferansa TehditVeEngel
• 17616 Tweets
Reece James
• 15798 Tweets
Mudryk
• 15353 Tweets
Sterling
• 14783 Tweets
نيمار
• 11605 Tweets
Pinned Tweet
Storybook 8 is here! 🥳
📸 Visual Tests addon
⚛️ React Server Component support
🎛️ Upgraded Vue & React control autogeneration
⚡️ Rearchitected
@vite_js
support + Vite 5
✨ New UI on desktop and mobile
💯 8,865 commits, 773 PRs, 218 contributors
16
161
608
Storybook 7.0 brings first-class Vite support⚡
🪄 Zero config setup
🙅 No Webpack required
🗜️ Smaller install size
🏎️ Storybook UI is pre-bundled for performance
🌐 Works with Vue 2 + 3, Svelte, React and more
Read »»
🧵1/-
15
176
754
🚀 Storybook 7.0 beta is live!
It's our biggest update ever. SB was re-architected for better performance and stability while also shipping hundreds of improvements.
See what’s new 🧵
5
97
615
Sneak peek of our new Figma plugin!
It brings designers closer to developers by connecting variants to stories.
🤝 Link design components to stories
🕹 Play w interactive stories in Figma
🎯 Compare implementation to design
See more »
22
106
519
Component Encyclopedia is live!
We're indexing every UI component in the world for you to learn from. We have 5,132 components so far—from Airbnb MSFT Adobe etc.
🌎 Browse visually
🔍 Search & filter
▶️ Demo live examples
♻️ Reuse components
🧵But why?
8
121
505
Introducing StorybookGPT, a GPT that automatically generates stories for React + TypeScript components!
Incredible work by by our community member,
@kaelig
👏 Check it out!
12
74
503
Interactive stories beta is live!
Simulate user behavior in your stories (click, type, hover). No need for a separate tests file or runner.
✅ Runs in real browser
⚡️ No waiting & no flake
🐙 Powered by
@TestingLib
🛠 Low maintenance
🔍 Debug visually
9
112
473
Figma plugin beta is here!
It streamlines design handoff & review by connecting stories to variants.
🔗 Link stories to designs
🕹 Interact w stories in Figma
📐 Compare design to implementation
🔐 Private projects + access control
Try it now »
🧵1/
9
89
431
🎉 We’re throwing a user conference to celebrate the 7.0 launch!
• Get your free tickets below
• Online Mar 14, 2023
• Demo new 7.0 workflows w maintainers
Wait, but why? 1/
6
70
414
Huge news: Storybook 8 is now in beta!
🚀 Major performance improvements
🔬 storybook/test
⚛️ React Server Components support
🖼️ One-click visual tests
🚚 No more React peer dependency
📱 Revamped mobile UI
💯s of fixes
🧵🧵🧵
6
79
393
Last week, we shared StorybookGPT – a GPT that automatically creates stories for React TS components.
Today, we bring you another incredible tool: Storybook Genie! It lets you automatically generate stories for React components via CLI 🤯
@_Eduard26
👏
7
72
389
▲ Next.js & Storybook, configured automatically
Our new framework provides zero-config Storybook support for your Next 12 & 13 apps:
🔀 Routing
🖼 Image optimization
⤵️ Absolute imports
🎨 Styling
🎛 Webpack & Babel config
💫 and more!
🗞 Read all about it...
4
76
377
You write stories, and Storybook runs tests
Storybook will soon allow you to write interaction tests inside the story itself:
🐙 Powered by
@TestingLib
✅ Run in the browser
🛠 Low maintenance & fast debugging
⚡No flake
Sign up for early access:
10
97
345
Storybook 6.5 is out!
It expands what stories are capable of while improving performance.
🤖 Interaction testing to verify app logic
🎨 Figma plugin to link stories & variants
🏎️ Lazy compilation for faster start up
⚡ Vite builder for instant rebuilds
4
92
335
Storybook 8 (our next major release) brings React Server Components support to Storybook!
In our new tutorial, learn how to build, document and test an RSC app in isolation with
@nextjs
, Storybook, and
@ApiMocking
≫
4
48
274
🚀 Storybook 7.0 beta is live!
Test-drive it and give us feedback:
🎨 Refreshed design
⚡ Vite support
⌨ TS 4.9
📝 Docs w MDX 2
🔖 CSF 3.0 for less boilerplate
🎁 Auto-config for NextJS & SvelteKit
📈 Test cov reporting
🏎️ Improved perf & reliability
2
36
264
Boom! Storybook 8’s RC is here! 🥳
This release means that Storybook 8 is now officially stable enough to use in production.
4
50
259
Storybook has long offered built-in TypeScript support. However, stories were not strongly typed.
You got great autocomplete features in story files, but no warnings about missing args.
Storybook 7 fixes that by combining CSF3 & TS satisfies operator »
4
38
254
Vite builder for instant rebuilds
Starting in 6.5, Storybook officially supports Vite as a build engine.
Our real-world benchmarks found that Vite hot module reloading is nearly 2x faster than Webpack 5.
6
41
249
Storybook 7.1 is here! 🎉
Featuring:
🏄♀️ New in-app onboarding
💅 Zero-config styling support
📝
@Typescript
-first code snippets
🗃️ API reference docs
✅Improved
@vuejs
support
💯 Hundreds more fixes and improvements
6
66
247
Storybook 6.4 is out!
New features, perf gains & improved ergonomics
▶️ Interactive stories to simulate user behavior
⚡️ On-demand architecture speeds up load times
⛸ Automigrate + versioned docs for easier upgrades
📋 Linter to enforce best practices
6
57
233
3x smaller 4x faster!
Storybook 6.4 brings huge perf gains for statically built Storybooks.
With Automatic Code Splitting, it only loads code needed for the first story.
The impact—smaller bundle sizes and faster load times.
3
62
230
Storybook 7.5 is here! It brings a ton of improvements that enhance the Storybook experience.
⚡️ Vite 5.0 + Lit 3.0 support
💨 2.2x faster React TypeScript start times
👻 'storiesOf' deprecated
🅰️ Many Angular improvements
🀄️ Rename
@nextjs
font imports
4
51
218
Introducing storybook-test: a more streamlined and powerful testing package for Storybook!
🔬 New utilities powered by
@vitest_dev
💨 Faster load times
🕵️ Improved patterns for writing actions/spies
🙌 Available now in SB 7.6 alpha
3
36
214
It's
#Config2023
official: Storybook integration is part of
@figma
's new Dev Mode!
Connect dev and design like never before, and transform your workflow and handoffs with a single source of truth.
Learn more about combining Storybook and Figma!
1
32
206
Storybook 7.6 is here! 🥳
🔥 Improved SWC support
🧪 New test utilities and fast build mode
⚛️ react-docgen upgrade
🔼 NextJS SWC + avif support and fixes
🇸 SvelteKit page and navigation mocking
🩺 Diagnose errors via CLI w/ Storybook doctor
🎉 New docs site
🧵
4
45
201
🥳 Storybook 7.0 just hit beta
It overhauls the codebase for performance and stability while introducing hundreds of improvements.
🏎️ Test drive 7.0 beta and help us find issues.
1
17
180
Why do most design systems implode?
We did some digging and found out, with the help of
@bradfrost
(author of Atomic Design)
🙅♂️ Not all engineers are made for design system work
🛠 Design system developers need custom tools
🐌 Design systems go stale fast
🧵
5
61
181
Storybook’s Permutation Table addon is now available in v.1.0.0! 🎉
View all your components and their variations in one interactive table.
Check it out, and shoutout to the fantastic work of the team at Daim Research for shipping this!
2
35
181
Storybook 8 strengthens our
@vuejs
support by integrating Vue’s official language tools (built on Volar)! ⚡️
Learn how this improves your Storybook’s controls and component documentation in our new Storybook 8 sneak peek:
3
31
176
Big news!
Storybook now has zero-config support for four of the most popular JavaScript styling libraries!
💨
@TailwindCSS
🧶
@MaterialUI
👩🎤
@emotioncss
💅
#StyledComponents
👀 And more to come!
Read on:
3
30
173
React Native Storybook (6.5) is here!
What's new?
✅ SB 6.5.14+ compatible
📝 CSF, Controls & Args support
📜 Core style config format (main.js & preview.js files)
⚡ Perf improvements
🎨 On-device UI improvements
🧵/
6
40
175
React Server Components are now supported in Storybook!
Learn how it works and try it now in the Storybook 8.0 alpha 🔥
3
34
176
No one:
Absolutely no one:
Me: Did you know you can customize your Storybook’s theme so that it looks like Elden Ring
4
24
174
Sneak peek of Storybook 7.0 new design!
Refreshed UI patterns so you can build more with fewer clicks, shorter mouse travel, and less waiting
📐 Increase canvas size
🛠 Toolbar organization
✍️ Icon overhaul
🔢 Form elements
⚡️ Performance
Read »»
1/🧵
7
41
174
The ecosystem for web apps in 2024 is 💯
Just created a new project
✅
@nextjs
✅
@tailwindcss
(v4)
✅
@storybookjs
✅ shadcn-ui
@shadcn
All working together, minimal config, full control 🚀
11
9
79
3
13
168
Component Encyclopedia is in beta!
We’re on a mission catalog the world’s UI components for you to learn from—3,490 components & 44 projects so far.
🌎 Reference components from top teams
▶️ Play with live implementation
🔍 View source
Read on:
1
41
164
⚡ Instant-on and lightning-fast rebuilds!
Vite is a next-gen build tool that gives you 10-100x improvement in startup speed. And it's now supported by Storybook.
The dev experience is truly sublime 🤩
Give it a go. It just takes a minute:
6
34
164
Storybook 6.2 just launched!
It's a giant leap forward that includes new features and integrations that make your job easier
🚀 Vue 3, Svelte-native CSF
📦 NPM 7, Yarn 2, ESM
🛠 Webpack 5
🎛 Controls addon refresh
💯 more improvements
Read:
6
46
159
Storybook is a treasure trove for frontend teams. But it can be hard to unlock!
In Storybook 7.1 (coming soon), we’re changing that through a new in-app guided tour!
🧑🏫 Interactive tutorial
📝 Write your first story
✅ Try now in alpha (React)
Read on:
2
32
156
Component Story Format 3 is here!
♻️ Spreadable story objects
🌈 Default render functions
📓 Automatic titles
⏯️ Play functions to script interactions
✅ 100% backwards compatible with CSF 2
🗞️ Read all about it...
7
21
155
🚫 Testing components for accessibility violations is as easy as linting code for errors!
🤖 Learn how to effortlessly automate accessibility tests with Storybook, in chantastic’s latest YouTube video.
4
18
156
🚀 Storybook for Vue 3 is here! This brings SBs features/ecosystem to the Vue community.
- Zero-config setup
- TS support
- Auto-generated controls and docs
- Automated testing
- Hundreds of addons
Works with
@vuejs
@nuxt_js
@vuetifyjs
1
52
152
Upgrading packages is a headache 🤕
You have to watch out for bugs & incompatible transitive dependencies.
That's why we've created Storybook Ecosystem CI—an early warning system to guard our users from this chaotic environment.
🧵 Here's how it works
2
25
151
Big news: React Native Storybook 7 is here!
🤝 Storybook 7 compatibility
🧩 Improved CSF3 support
🔒 TypeScript-first
💨 Automatic story loading
🛡️ Stronger error handling
📝 Enhanced markdown
🎛️ Controls auto-generation
🧵🧵🧵
2
33
147
⚡ First-class Vite support
Vite is a next-gen build tool that gives Storybook 7.0 fast startup and instant reloads.
We now support automatic configuration from your Vite config, and Webpack is no longer installed into your projects.
1
17
147
Are you using
@Figma
's new Dev Mode? Storybook is an official integration!
Below, check out how you can bring Storybook into Figma. Create one source of truth that shows your code and designs side-by-side, and make your handoffs way less hands-on 😎
3
26
143
We're adding new docs features to help you learn Storybook!
📖 API references
📢 Docs feedback widget
⌨️ TypeScript-first
⚡️ Performance updates
🧑💻 Comprehensive code snippets
Read all about it:
1
27
142
Sneak peek of Component Encyclopedia!
We scoured the web for OSS UI components and put them in 1 place for you to reference while building your UIs.
🌎 Browse 1000s of UI components
🔍 Search across projects
▶️ Play with live UI implementation
6
36
142
@jamesqquick
We've been building up a community resource of jobs spotted by the Storybook community! We currently have 67 open roles for devs of all levels of experience!
1
24
141
7.0 design is now in alpha!
Small improvements add up to big productivity boosts over time. Try it out now!
📐 Layout edge-to-edge
🛠 Toolbar reorganized
✍️ 200 redrawn icons
🔢 Form elements refined
⚡️ Pre-bundled app for speed
Read »
1/🧵
5
29
140
Figma plugin is live! GA
Compare stories vs design specs to speed up handoff & review.
🔗 Link stories to components/variants
🕹 Play w live implementation in Figma
📌 Highlight components to reuse
🔐 Setup private projects
Try it »
🧵1/
6
43
137
Storybook ❤️ ESLint! We have a new linter plugin for you
✅ Auto-validate story code
🗂 Standardize story syntax across projects
✨ Easy access to auto-migration tools
📐 12 linter rules so far
Get it now:
1
16
136
Write interaction tests in your stories. Now in beta!
✅ Test user behavior and automate runs via CLI
🐛 Debug interactively in your browser
⚡️ Run tests in parallel & across browsers
🎭 Powered by Jest, Playwright & Testing Library
🧪 No flake
5
25
132
New Storybook 8.0 alpha (8.0.4) just dropped!
It contains a big win for all our non-React users: you no longer need to install React as a dependency in your Storybook project! 💥
6
22
135
Sneak peek: new Visual Tests addon! 🎉
Pinpoint bugs to the pixel by automatically screenshotting every story.
🌍 Test in Chrome, Safari, Firefox and Edge
📸 Specify viewport, i18n, CSS media features
🐇 Hyper-parallelized
Learn how + get early access:
5
24
132
Storybook now has zero-config support for
@tailwindcss
!
Let your Tailwind components dazzle your component library – with minimal setup required.
Find out more:
2
24
129
Webpack 5 support for Storybook is here!
🏎️ Improved performance
✅ Better ecosystem compatibility
🎄 Access to new features like module federation
Try it today by upgrading to the 6.2 beta.
6
40
130
Say goodbye to config headaches!
Our new Styling Addon makes it easy to configure Storybook to work with CSS libraries like
@tailwindcss
,
@MaterialUI
&
@chakra_ui
🙆 Framework-agnostic
🌎 Handles global styles
🎨 Theme providers, overrides & switcher
4
19
126
Storybook for Svelte just got its biggest upgrade ever. Coming soon to 6.2.
- Svelte-native story format
- Improved docgen
- New tutorials/docs
@sveltejs
@SvelteSociety
6
34
124
Addon ecosystem 2.0 launched!
Addons supercharge your workflow. They can self-configure integrations and automate UI testing.
🧩 Browse 200+ addons in one place
🛠 Build your own in 2hrs
📕 In-depth tutorials
📐 Comprehensive docs
3
37
123
Storybook 7 brings a revamped Docs feature with sleeker API and improved developer experience.
🏛️ New component-centric information architecture
⬆️ Upgraded to support MDX2
🧱 More powerful & consistent Doc Blocks API
🧵/
12
22
122
7.0 beta is here!
This is our biggest update ever (perf + stability + 100s of improvements).
We'd love your help during the beta period to give feedback and report issues. Check out the post for a migration guide!
0
21
121
Storybook's ESLint plugin is here!
✅ Validate story code as you write it
🗂 Standardize how you write stories across projects
✨ Simplifies auto-migration bw versions via codemods
Install it:
Shoutout to
@yannbf
@mshilman
@geteslint
How to use Storybook with ESLint
Automatically validate stories in your code editor
storybook.js.org
1
29
118
Storybook 6.3 is here!
Streamlining everyday UI development tasks
📐 Styling—measure & outline DOM elements
🔌 Reuse stories in
@fbjest
@TestingLib
@Cypress_io
🚀 Angular 12 Ivy, Lit 2.0
🛠Webpack 5 stable, Vite
📦 Modern ESM perf option
And much more:
4
30
110
Storybook is powered by builders, which transform your code into executable chunks for the browser.
Webpack is the default, but with 6.4+, you can also switch to Vite.
We benchmarked both to see which offers the fastest dev experience in Storybook.
2
32
109
🚀 Just launched Framework API
A new architecture that ups perf, cuts weight, and is zero config for popular app setups.
This unlocks integrations coming to v7.0:
⚡️ Vite
▲ NextJS in progress
🦾 SvelteKit in progress
💿 Remix TBD
🏔 Nuxt TBD
1/14
1
28
108
Storybook 7.2 is here! 🎉
Featuring:
👷 Optional prod mode for
@Angular
✅
@TypeScript
fixes
🤝 Vue 2 reactivity fix
This launch begins a new experimental release cycle – shipping smaller but more frequent versions!
Read on in our July update:
2
26
106
Our Visual Tests addon (now in beta!) lets you:
▶️ Run visual tests
🔎 Inspect results
✅ Accept changes
all within Storybook 😎
2
10
100
Next.js 12 is here!
@chantastic
shares four quick tips to get the most from Next.js and Storybook!
📦 Use Webpack 5
📑 Write stories for Next.js pages
🌎 Import shared global styles in preview.js
⬇️ Integrate next/image
2
23
99
🎉 7.0 beta is here!
Highlights:
🎨 Refreshed design
⚡ Vite support
⌨ TS 4.9
📝 Docs w MDX 2
🔖 CSF 3.0 for less boilerplate
🎁 Auto-config for NextJS & SvelteKit
📈 Test cov reporting
🏎️ Improved perf & reliability
0
14
98
We love how the React Aria team use Storybook!
Check out the Storybook for their newly-released
@tailwindcss
starter kit, which documents fully customizable implementation of React Aria + Tailwind components 🥳
cc:
@devongovett
1
15
97
This is a beautiful new site by our friends at
@Angular
! 🎉
Today, we are excited to announce – the future home for Angular developers.
58
463
2K
1
8
98
🚨 New feature alert 🚨
We’re prototyping a way for you to create new stories in Storybook via controls!
First, customize your story’s controls in Storybook. Then, either update the current story or save to a new one!
5
8
97
TypeScript is taking over the world! It's used by 81% of all Storybooks running Storybook 7 🤯
That’s why Storybook's docs are now
@TypeScript
-first. Whenever code snippets have a TypeScript option (most of them do), we use TypeScript by default.
2
13
94
we’re so back. the journey to Storybook 8 has begun!
2
13
92
Zero config Vite setup with Storybook 🪄
Storybook 7.0 extends from your existing Vite config.
This means you no don't have to duplicate your config or manually merge it with your Storybook config.
To learn more »
0
12
88
Learn how to write cleaner code and ship fewer bugs in our quick Introduction to Storybook!
Created by Storybook maintainers, the guide shows how to use Storybook to build, document, and develop your components in isolation 👉
2
29
89
Take stories to wherever your content lives
You can now embed stories into any tool that supports the oEmbed standard, eg:
@Confluence
,
@NotionHQ
,
@Medium
and
@Ghost
Publish your storybook on
@chromaui
and copy/paste the link in your tool of choice.
1
22
89
Less to type, plus no updates required if you reorder your files
With CSF3, story titles are automatically generated based on the file's location relative to the root.
0
7
88
Storybook 8 removes the need for non-React devs to *also* include React in your projects.
It’s one of many improvements for non-React users coming with our next full release!
5
7
86
Is Atomic Design relevant in 2022?
@chantastic
and
@brad_frost
talk about seven years of Atomic Design, the evolution of frontend engineering, the power of design systems, and the bright future of Web Components!
Catch the complete interview on YouTube
2
20
85
🕹️ Automated interaction tests
CSF 3.0 introduces Play functions—little snippets of code that are executed after a story is rendered.
You can use them to verify user interactions using Testing Library, right inside Storybook.
0
14
84
Storybook 8 introduces a totally new workflow for safeguarding UI from unexpected visual changes, via the Visual Tests addon!
Today, it’s available to try in beta ⬇️
1
15
83
Instant boot-up for large Storybooks!
Storybook 6.5 brings lazy compilation for Webpack
⚙️ Only compiles the core runtime for a quick start
🧳 Builds stories as you visit them
That means faster start-up and rebuilds during local development.
2
17
84
Storybook for Angular 12 is here!
🖼 Ivy rendering support
📦 Webpack5 support
🎛 Auto-generated controls & docs
📝 Dynamic source snippets
🎁 Zero-config setup w/ built-in TS support
📚 Updated tutorials and documentation
2
27
82
Zelda: TOTK is a fantastic example of building a game.
However, it's also a great game about building and making tools that we use to interact and interface with the world.
Let's delve into how Link is an unlikely hero of the principles of design and the secret of great UIs! 🧵
1
33
79
Storybook now has zero-config support for
@MaterialUI
!
Bring your beautiful MUI components into Storybook without any setup hassle using our shiny, updated styling addon.
Find out how in our latest blog!
1
15
80
ok this is only tangentially related but did you know that the reason why Vite uses port 5173 is because 5173 = VITE
5 = V (Roman numerals)
1 = I
7 = T
3 = E
🤯🤯🤯
Today,
@vite_js
accounts for almost half of all Storybook projects, so we were super excited to bring you more Vite goodness in Storybook 8!
⚡️ Rearchitected Vite support
⚡️ Vite 5 compatibility
⚡️ A new testing package powered by
@vitest_dev
1
4
63
2
12
81
✨🎊 Welcome to 2024! 🎊✨
Get the first-look at what we’ll be cooking up this year, plus all our 2023 highlights – from first-class
@vite_js
support to our biggest release ever.
3
15
79
2022 was a landmark year for Storybook:
🏎️ Improved perf & stability
✅ New testing capabilities
⚡ First-class support for Vite
🖼️ Frameworks API for zero-config integrations
🗃️ Launched Component Encyclopedia
We're excited to build on that in 2023 »
1
25
79
✨ New Community Addon ✨
Generate stories for React, Vue, and Lit components automatically, without needing a GPT!
Huge shoutout to the addon’s author,
@takumaru_2222
🥳
2
7
77
⚡️ Faster UX coming to Storybook 6.1!
We rebuilt the sidebar to make it fast + intuitive to navigate large component libs.
Read:
🧵Thread below
3
11
76