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:

.storybook/preview.tsx

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { definePreview } from '@storybook/your-framework';
 
export default definePreview({
  parameters: {
    layout: 'centered',
  },
});

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:

Button.stories.ts|tsx

import preview from '../.storybook/preview';
 
import { Button } from './Button';
 
const meta = preview.meta({
  component: Button,
  // Sets the layout parameter component wide.
  parameters: {
    layout: 'centered',
  },
});

Story layout

Or even apply it to specific stories like so:

Button.stories.ts|tsx

import preview from '../.storybook/preview';
 
import { Button } from './Button';
 
const meta = preview.meta({
  component: Button,
});
 
export const WithLayout = meta.story({
  parameters: {
    layout: 'centered',
  },
});