Story layout

The layout parameter allows you to configure how stories are positioned in Storybook's Canvas tab.

Global layout

You can add the parameter to your ./storybook/preview.js, like so:

Layout params centered story

In the example above, Storybook will center all stories in the UI. layout accepts these options:

  • centered: center the component horizontally and vertically in the Canvas
  • fullscreen: allow the component to expand to the full width and height of the Canvas
  • padded: (default) Add extra padding around the component

Component layout

You can also set it at a component level like so:

Story layout

Or even apply it to specific stories like so:

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,559 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI