@storybook/addon-viewport

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.

Similar packages

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.