Storybook@storybookjs

Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom

 npx storybook@latest init
storybook.js.org/
Joined May 2017
1,553 Photos and videos
Load newest
StorybookGPT lets you automatically generate stories from React components, and it just passed 1,000 chats! Congrats to our friend @kaelig for doing magical things with Storybook and LLMs 🧙‍♂️ chat.openai.com/g/g-Ev8pDjD1…
2
6
36
3,296
And here’s the CSF 3.0 version! chat.openai.com/g/g-ZVAQQNB2…

ChatGPT - StorybookGPT (CSF 3.0)

ChatGPT helps you get answers, find inspiration, and be more productive.

chatgpt.com
1
4
691
Storybook retweeted
Marcelo Prado
@mprado
23 Feb 2024
6. Plenty of docs and examples 📚 Learn more about Flash Calendar in the official documentation: marceloprado.github.io/flash… Thanks to @storybookjs, @Danny_H_W and the latest RN Storybook 7, a great playground is available with tons of useful examples ready to use:
0:41
1
1
20
2,174
Interested in learning how to run better tests in Storybook? 📝 Join our core team at @chromaticcom on March 7, 9:00am PST, for a free workshop on the theme of UI testing! RSVP ⬇️ docs.google.com/forms/d/e/1F…
Chromatic – Storybook Sessions

ALT Chromatic – Storybook Sessions

2
1
13
2,500
this isn’t even our final (Google) Form
1
653
No one: Absolutely no one: Me: Did you know you can customize your Storybook’s theme so that it looks like Elden Ring
A screenshot of a Storybook, styled in the same colours, branding, and assets as the videogame, Elden Ring.

ALT A screenshot of a Storybook, styled in the same colours, branding, and assets as the videogame, Elden Ring.

4
22
160
16,599
more replies
if you want to recreate this at home (warning: be prepared for how hard it goes), here’s what we used in our manager file (code in the alt text)
import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; addons.setConfig({ theme: create({ // Base theme - you can use light or dark base: "dark", // Brand brandTitle: "Very scary developer environment!!!", brandImage: "/eldenring.png", brandTarget: "_self", // Typography fontBase: '"Mantinia", sans-serif', fontCode: "Mantinia", // UI colours colorPrimary: "#340c05", colorSecondary: "#bf4803", // Text colours textColor: "#ffffff", textInverseColor: "#ffffff", // App appPreviewBg: "#1f1f1f", appContentBg: "#1f1f1f", }), });

ALT import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; addons.setConfig({ theme: create({ // Base theme - you can use light or dark base: "dark", // Brand brandTitle: "Very scary developer environment!!!", brandImage: "/eldenring.png", brandTarget: "_self", // Typography fontBase: '"Mantinia", sans-serif', fontCode: "Mantinia", // UI colours colorPrimary: "#340c05", colorSecondary: "#bf4803", // Text colours textColor: "#ffffff", textInverseColor: "#ffffff", // App appPreviewBg: "#1f1f1f", appContentBg: "#1f1f1f", }), });

1
2
1,274
we vote unanimously in support of this integration, @zeplin
Zeplin
@zeplin
22 Feb 2024
Replying to @storybookjs
New pop-up message idea for when a new Storybook instance is connected in Zeplin:

ALT Godfrey Elden Ring GIF

1
2
1,092
Big congrats to @hermaeai for launching on @ProductHunt 🥳 Hermae is like ChatGPT for design systems, with a Storybook integration that can answer any single question about your Storybook's contents! Check it out 👉 youtube.com/watch?v=d8EFQqHa…

Design Systems AI Assistant - Hermae

The AI Assistant for design systems. Like a ChatGPT for your fronte...

youtube.com
3
3
19
1,682
Give the launch some @ProductHunt love 💕 Major shoutout to @MikeCarbone and the team! producthunt.com/posts/hermae…

Hermae: The AI Assistant Trained on your Frontend Design System | Product Hunt

Hermae is an AI assistant trained on YOUR frontend components or design system. It can generate code that's ready for production, answer questions, provide feedback, and more. Increase development...

producthunt.com
3
576
Load more