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.
Superagency: What Could Possibly Go Right with Our AI Future
$16.40 (as of March 12, 2025 13:35 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.)
Learn Spanish While You Sleep & Learn Spanish While Driving in Your Car: Over 50 Hours of Learning Spanish Lessons from Beginner or Basic Spanish to Intermediate Conversational Spanish
$26.21 (as of March 12, 2025 13:35 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 Engineering: Building Applications with Foundation Models
$59.98 (as of March 12, 2025 13:35 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.
