Skip to content
JavaScript Other
Branch: master
Clone or download
Latest commit fff5f6a Aug 20, 2019

Storybook Design System

NPM JavaScript Style Guide

Used by

Note: this design system is not used in Storybook's UI. The stack is different and theming requirements of Storybook add complexity beyond the scope of this project. However, Storybook's visual design is identical to what's here.

Tech stack

Building components

Maintaining the system


The Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.

What we're doing

  • Build and maintain a design system in the open
  • Share UI components between multiple apps
  • Dogfood upcoming Storybook features
  • Welcome contributors of all levels and backgrounds

What we're not doing

  • Rewrite all new components from scratch
  • Overhaul the visual design of components
  • Typescript (the consumer apps don't use it)
  • Compete with more general design systems like ANT or Material.


npm install --save @storybook/design-system


import React, { Component } from 'react';

import MyComponent from '@storybook/design-system';

class Example extends Component {
  render() {
    return <MyComponent />;

Development Scripts

yarn release

Bump the version

Push a release to GitHub and npm

Push a changelog to GitHub


  • Requires authentication with npm adduser
  • auto is used to generate a changelog and push it to GitHub. In order for this to work correctly, an environment variable called GH_TOKEN is needed that references a GitHub personal access token with the appropriate permissions to update the repo.


MIT © shilman

You can’t perform that action at this time.