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

Story layout

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

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: Add extra padding around the component

If you want to use your own styles, or require a more granular approach we recommend using decorators instead.

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