Join us live: AI that knows (and uses) your design system

Add a ruler much like Photoshop has to component preview.

View on Github

Storybook Addon Ruler

This Storybook addon creates a ruler based on RulersGuides.js.

Getting Started

*note: addons require @kadira/storybook 2.x or greater

npm i --save storybook-addon-ruler

Then create a file called addons.js in your storybook config.

Add following content to it:

import '@kadira/storybook/addons';
import 'storybook-addon-ruler/register';

Then write your stories like this:

import React from 'react'
import { storiesOf } from '@kadira/storybook'
import { ruler } from '../'

storiesOf('Button')
  .addDecorator(ruler({}))
  .add('sample', () => (
    <button>Click me</button>
  ))