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:

Code Snippets

Oh no! We could not find the code you are looking for.

It would be great if you could report an issue on Github if you see that message.

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

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

Code Snippets

Oh no! We could not find the code you are looking for.

It would be great if you could report an issue on Github if you see that message.

Or even apply it to specific stories like so:

Code Snippets

Oh no! We could not find the code you are looking for.

It would be great if you could report an issue on Github if you see that message.