Search code examples
storybook

Storybook Set Component into the center of the page

I'm introducing storybooks into our react components. When I start adding examples:

enter image description here

The components themselves are added to the top left corner. In this example: http://react.carbondesignsystem.com/?selectedKind=ComposedModal&selectedStory=Using%20Header%20%2F%20Footer%20Props&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

We can wee that the components themselves are flushed in the middle of the page.

How do I do that?

Solution

  • You can use Storybook addon called "@storybook/addon-centered". This can be found here: https://www.npmjs.com/package/@storybook/addon-centered

    Alternatively, you can also provide style parameters with each story to style a particular template. Here is a quick example of that:

    .add('Your sample story', () => ({
      template: `<sample-component class="sample-component-class"><sample-component>`,
      styles: ['.sample-component-class {display: flex; justify-content: center}'],
      props: {
         sampleProps
      },
    }))

    Hope this helps.