Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Render Modes
Storybook addon that adds ability to emulate render mode (css user preferences) of a story
npm install storybook-addon-render-modes
Last updated 2 months ago
Downloads per week
Readme View on GitHub

Storybook Addon Render Modes

This addon adds ability to emulate user CSS rendering preferences such as prefers-reduced-motion and others.


Initially fork of storybook-addon-css-user-prefs to support sb@^8.0.0

List of supported modes:

  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-data
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • print (todo)
  • noscript (todo)


  1. Package installation pnpm add -D storybook-addon-render-modes

  2. Addon registration

const config: StorybookConfig = {
  // ...yourOtherSettings
  addons: [

export default config;


This addon doesnt force changing of rendering mode in browser level (seems impossible). But instead it uses hacky approach: we go through document.styleSheets via JS and manually rewriting media style rules.

This approach may work not as expected in some cases. Feel fre to create an issue for such cases.

Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI