Storybook for Design Systems

Document design with Storybook components for colors, typography, and icons. Learn how with @chantastic

[@sadafamini-nia483]

You are awesome thanks

[@givemealemon]

I made some custom components to do the same in previous Storybook versions. Very nice to see them built-in!!

[@chromaticui]

heck yeah! glad we may be able to help eliminate the need for extra work :)

[@ethmerger9031]

Amazing, exactly what I needed!

[@chromaticui]

awesome! so glad to hear it

[@zeta_pon]

sir, please provide instructions/tutorials on how to make components that can wrap elements or components, such as grid, row, col, and others🙏

[@chromaticui]

In Storybook or in general?
If in Storybook, we have a video on decorators that should be just what you’re looking for!
ua-cam.com/video/4yi_yCTkgng/v-deo.html

[@GurdeepSingh-kl5hx]

Good work 👍

[@chromaticui]

thanks so much!

[@mtfreytag]

Why does my storybook/react not like me adding the javascript in the MDX files. when i try that i get "Could not parse expression with acorn"

[@KinanAlsakka]

how can we use this with angular? there is any Docs for that?

[@codewithkeys]

Amazing

[@chromaticui]

thank you for saying so!!

[@flexbox_]

How can you use this with tailwind? like for typography?

[@chromaticui]

import from the `tailwind.config.js` file.

[@joostkersjes4349]

I was able to keep it pretty simple with these lines:
1. import resolveConfig from "tailwindcss/resolveConfig";
2. import tailwindConfig from "../../../tailwind.config.js";
3. export const { theme } = resolveConfig(tailwindConfig);
And then use e.g. theme.fontFamily to your liking

[@AdventureTroy]

IF I place the Colors.mdx file in the .storybook folder should it just show up? Mine is not showing up.

[@aureliolimaferreira9461]

hi, can i have access to my current theme (addon-theme) directly in my mdx file ? i wanna make my ColorPalette dynamic

[@danstuart5722]

some of our design systems have different icon sizes for different icon sets. is it possible to set icon size for specific IconGalleries?

[@chromaticui]

here's the IconGallery code. looks like it theme values, or you could use the components to create a new component of your liking: github.com/storybookjs/storybook/blob/d5ca2f42838c9f5a3e556a5e819e58f0deff522e/code/ui/blocks/src/components/IconGallery.tsx#L55-60

[@easty_]

Is this only in mdx files? or can it be in a tsx file?

[@chromaticui]

in CSF modules via docs page template ua-cam.com/video/q8SY4yyNE6Q/v-deo.htmlfeature=shared

[@AbdullahTilal]

Got any luck in implementing it in tsx file?

[@aidenberzins]

Do you all have a docs page for these three features?

[@chromaticui]

yup! storybook.js.org/docs/react/writing-docs/doc-blocks#page-top
There's a new section in API for reference docs on each one storybook.js.org/docs/react/api/doc-block-argtypes