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.
Vibe Coding: Building Production-Grade Software with GenAI, Chat, Agents, and Beyond
$21.83 (as of October 17, 2025 18:05 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.)
uni SD Card Reader, High-Speed USB C to Micro SD Card Adapter USB 3.0 Dual Slots, Memory Card Reader for SD/Micro SD/SDHC/SDXC/MMC, Compatible with MacBook Pro/Air, Chromebook, Android Galaxy
$7.99 (as of October 18, 2025 00:44 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.)
Amazon Basics Micro SDXC Memory Card with Full Size Adapter, A2, U3, Read Speed up to 100 MB/s, 128 GB, Black
$11.99 (as of October 18, 2025 00:44 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.
