When working with Storybook, I wanted my component previews to take up the entire viewport height. But by default, the preview area doesn’t always stretch to fit the full screen. After trying a few different approaches, I found the simplest and most reliable way to achieve this.
Thank me by sharing on Twitter 🙏
Here’s how to make sure your Storybook preview always fills the full height of the browser window.
Use a Decorator to Force Full Height
The best way to handle this is by wrapping every story in a container that explicitly sets its height to 100vh. Storybook provides a decorator feature, which makes it easy to apply this to all stories globally.
In your .storybook/preview.js or .storybook/preview.ts, add the following:
import { Decorator } from '@storybook/react';
export const decorators: Decorator[] = [
(Story) => (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
<Story />
</div>
),
];This ensures that every story renders inside a full-height container, no matter how your components are structured.
Syntech USB C to USB Adapter Pack of 2 USB C Male to USB 3.0 Female Adapter Compatible with MacBook Pro Air 2024, Microsoft Surface, iPad,Samsung Notebook, Dell XPS and More Type C Devices,Space Grey
$9.99 (as of March 20, 2025 13:57 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
AI Guide for Beginners: How to Use AI Prompts & Master Artificial Intelligence in 4 Practical Days (21 Days To Make Money With AI Book 1)
$4.99 (as of March 20, 2025 13:57 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
HP 67 Black / Tri-color Ink Cartridges (2 Pack) | Works with HP DeskJet 1255, 2700, 4100 Series, HP ENVY 6000, 6400 Series | Eligible for Instant Ink | 3YP29AN
$36.89 (as of March 20, 2025 13:57 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)Why This Works Best
I initially tried adjusting global styles using CSS, but Storybook’s internal styles sometimes override them. Similarly, modifying Storybook’s layout settings wasn’t necessary with recent versions. The decorator method avoids those issues and works consistently across different setups.
Ensuring Components Expand Correctly
For this to work as expected, the components themselves need to support full-height layouts. If a component is nested inside a parent without a defined height, it might not stretch properly. Adding height: 100% to your component’s container can help:
.your-component {
height: 100%;
}Wrapping Up
Using a decorator is the cleanest and most effective way to make Storybook previews fill the entire viewport. It doesn’t rely on modifying Storybook’s internals, and it ensures every story has the right layout without extra configuration.
This approach has worked well for me, and I hope it makes your Storybook experience smoother too.
