New
You're viewing older docs for version 6.5. View latest docs

Typeset

Storybook's Typeset Doc Block helps document the fonts used throughout your project.

Docs blocks with typography

Working with MDX

Similar to other documentation related Doc Blocks (e.g., ColorPalette, IconGallery), the TypeSet Doc Block is also commonly used with MDX. It allows additional customization via options. Below is a condensed example and table featuring all the available options.

OptionDescription
fontFamilyProvides a font family to be displayed .
<Typeset fontFamily={"Nunito Sans"} />
fontSizesProvides a list of available font sizes.
<Typeset fontSizes={[ 12, 14, 20 ]} />
fontWeightDefines the weight of the font to be displayed.
<Typeset fontWeight={800} />
sampleTextDefines the text to be displayed.
<Typeset sampleText='Example Text' />

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,565 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI