Join live: How to implement generative UI without losing control

Storybook Mobile UX Hints

This addon offers suggestions on how you can improve the HTML, CSS and UX of your components to be more mobile-friendly.

View on GithubNew to Storybook?Get started

📱storybook-mobile-addon

This addon offers suggestions on how you can improve the HTML, CSS and UX of your components to be more mobile-friendly.

To see all available suggestions, check out a live storybook demo here.

Versions

  • 10.x.x is for Storybook >=10.0.0
  • 4.x.x is for Storybook >=9.0.0
  • 3.1.x is for Storybook >=8.2.0
  • 3.0.x is for Storybook >=8.0.0
  • 2.x is for Storybook >=7.0.0

Quick Start

npm install --save-dev storybook-mobile-addon

Next, add storybook-mobile-addon to your list of addons:

.storybook/main.js

module.exports = {
  // other config goes here
  addons: [
+    'storybook-mobile-addon'
  ],
}

This addon works best when you set mobile-sized viewports in your preview.ts.

Contributing

If you have any suggestions or find any bugs, please make an issue or a pr!