> **Version 9** — **React** / **TypeScript**
> Also available:
- `?renderer=angular` for angular, svelte, web-components
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.3 (latest) (`/docs/configure/story-layout.md`), Version 8 (`/docs/8/configure/story-layout.md`)

# Story layout

The `layout` [parameter](https://storybook.js.org/docs/9/writing-stories/parameters.md) 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`](https://storybook.js.org/docs/9/configure/index.md#configure-story-rendering), like so:

```ts
// .storybook/preview.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.

const preview: Preview = {
  parameters: {
    layout: 'centered',
  },
};

export default preview;
```

![Layout params centered story](../_assets/configure/layout-params-story-centered.png)

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:

```ts
// Button.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.

const meta = {
  component: Button,
  // Sets the layout parameter component wide.
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<typeof Button>;

export default meta;
```

## Story layout

Or even apply it to specific stories like so:

```ts
// Button.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const WithLayout: Story = {
  parameters: {
    layout: 'centered',
  },
};
```