https://github.com/stevensacks/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.
https://github.com/stevensacks/storybook-mobile-addon

Last synced: 9 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/stevensacks/storybook-mobile-addon
• Owner: stevensacks
• License: mit
• Created: 2022-10-04T09:15:51.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2025-05-28T18:16:13.000Z (about 1 year ago)
• Last Synced: 2025-10-13T21:28:42.675Z (9 months ago)
• Language: TypeScript
• Size: 9.94 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 📱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.](https://storybook-mobile.netlify.app/?path=/story/signup-form--default)

## Versions

- 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`

```diff

module.exports = {

  // other config goes here

  addons: [

+    'storybook-mobile-addon'

  ],

}

```

This addon works best when you set mobile-sized [viewports](https://storybook.js.org/docs/essentials/viewport) in your `preview.ts`.

## Contributing

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