New
Community Showcase #5Visual test with Chromatic
Star78,835
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Perfect Design
Storybook for design assets with a pixel perfect preview
npm install storybook-addon-perfect-design
Last updated over 2 years ago
420
Downloads per week
Readme View on GitHub

Storybook Addon Perfect Design

This addon helps develop your components with pixel perfect accuracy! It allows you put a semi-transparent image overlay over the top of the developed component and perform pixel-to-pixel comparison between them.

Keyboard shortcuts

  • [Shift + Arrow keys] for 10px position change
  • [Alt + Shift + Arrow keys] for 0.1px position change

Getting Started

Requires Storybook 6.1 or later. Install the latest with npx sb upgrade --prerelease

First, install the addon

npm i -D storybook-addon-perfect-design

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

module.exports = {
  addons: ['storybook-addon-perfect-design']
};

Usage

Within your stories:

import React from 'react';

import imageUrl from './images/my-image.jpg'; 

export default {
  title: 'Design Assets',
  parameters: {
    assets: [
      imageUrl, // link to a file imported
      'https://via.placeholder.com/300/09f/fff.png', // link to an external image
      'https://www.example.com', // link to a webpage
      'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
    ],
  },
};

export const defaultView = () => (
  <div>your story here</div>
);
Join the community
6,179 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI