title

sidebar

Story layout

order	title
6	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:

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}

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:

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}

Or even apply it to specific stories like so:

{/* prettier-ignore-start */}

{/* prettier-ignore-end */}