Design system components used throughout VIP.

Usage no npm install needed!

<script type="module">
  import automatticVipDesignSystem from 'https://cdn.skypack.dev/@automattic/vip-design-system';


VIP Design System

Design system components used throughout VIP.

Storybook Components



Make sure you have node.js and NPM installed. Here's a handy installer for Windows, Mac, and Linux.


To get setup run the following command in the vip-design-system directory:

npm install

Watching for changes

You can build it continuously so that every time you make a change, build files are automatically updated:

npm run watch


We can test two ways:


For components that include storybooks, we can run npm run storybook to view the components in a sandbox-ed storybook environment.

npm link

  1. Run npm link in your checkout of this repo.
  2. Spin up a local copy of the VIP Dashboard and navigate to a page using the linked components from @automattic/vip-design-system

Note: it's super useful to run npm run watch in another process, so any changes will be almost immediately available / testable.

Publish NPM Package Instructions

Once all the changes needed are merged to master, and you are ready to release a new version, follow these steps:

  1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-p√Ętisserie help in case you need it.
  2. Pull all the changes to your local master. Make sure you have the latest master locally.
  3. We follow the https://semver.org/ versioning. You should run the specific version you are trying to publish:
npm version major|minor|patch
  1. You should see a version bump in the package.json file.
  2. Build the application:
npm run build
  1. Publish the application
npm publish

Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process.

  1. Push the tags to the repository and master updates.
git push --tags
git push origin master
  1. For major versions or breaking changes, it's recommended to create a RELEASE with the published tag.