New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ 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
1.5k
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"],
};

Usage

See toolbar for feedback

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI