@storybook/addon-viewport

What is @storybook/addon-viewport?

The @storybook/addon-viewport package allows developers to customize the viewport size to simulate different screen sizes in Storybook's UI. This is particularly useful for ensuring that components and layouts are responsive and look good on various devices, from mobile phones to desktop monitors.

What are @storybook/addon-viewport's main functionalities?

Custom Viewport Configuration

This code configures Storybook to use a set of predefined viewports. The INITIAL_VIEWPORTS constant provides a list of common device resolutions that can be used to test the responsiveness of components.

import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

export const parameters = {
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
};

Adding New Viewports

Developers can add custom viewports to the Storybook configuration. This code sample demonstrates how to add new devices, such as Kindle Fire 2 and Kindle Fire HD, with specific resolutions to the viewport addon.

export const parameters = {
  viewport: {
    viewports: {
      kindleFire2: {
        name: 'Kindle Fire 2',
        styles: {
          width: '600px',
          height: '963px',
        },
      },
      kindleFireHD: {
        name: 'Kindle Fire HD',
        styles: {
          width: '533px',
          height: '801px',
        },
      },
    },
  },
};

Other packages similar to @storybook/addon-viewport

react-device-detect

This package provides device detection for React applications. It offers hooks and components to conditionally render UI elements based on the device. Unlike @storybook/addon-viewport, it does not integrate with Storybook but can be used within the app's codebase to adapt the UI for different devices.

react-responsive

React-responsive is a package that allows the creation of media queries in React components. It is similar to @storybook/addon-viewport in that it helps in building responsive UIs, but it does so within the context of the app rather than in a Storybook environment.

README

Storybook Viewport Addon

Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook.

Framework Support

Installation

Viewport is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-viewport

Then, add following content to .storybook/main.js:

export default {
  addons: ['@storybook/addon-viewport'],
};

You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.

Usage

The usage is documented in the documentation.

Changelog

7.0.0 (March 31, 2023)

Storybook 7.0 is here! 🎉

• ⚡️ First-class Vite

• 🔼 Zero-config NextJS

• 🇸 Zero-config SvelteKit

• 🏗️ Frameworks API

• 3️⃣ Component Story Format v3

• 🛡️ Improved type safety

• 📚 Docs overhaul with MDx2 support

• ☂️ Code coverage for interaction testing

• 🖼️ UI design refresh

• 🏛️ Improved stability

  7.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 7.0.0-alpha.*, 7.0.0-beta.*, and 7.0.0-rc.* for the full list of changes.

See our Migration guide to upgrade from earlier versions of Storybook.

Full announcement and proper release to the latest npm tag coming soon. 😘