Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Web Vitals
See how your component fairs according to web vitals
npm install @washingtonpost/storybook-addon-web-vitals
Last updated 9 months ago
Downloads per week
Readme View on GitHub

Storybook Addon Web Vitals

Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story. We use the web-vitals.

We report on FID, CLS, and LCP.

React Storybook Screenshot

Getting Started

Requires Storybook 6.1 or later

First, install the addon

npm i -D @washingtonpost/storybook-addon-web-vitals

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

module.exports = {
  addons: ["@washingtonpost/storybook-addon-web-vitals"],


See toolbar for feedback

Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI