Pivotal UI is Pivotal's design system. It aims to help Pivotal teams efficiently design and build apps and websites that look and feel consistent.
If you're brand new to Pivotal UI, start by reading the FAQ and the pages on typography, colors, the 8-point grid, and accessibility. These will give an overview of the principles behind the design system.
The system is implemented as a Figma library, React components, and CSS styles that you can include in your project. To start using Pivotal UI, follow the steps below.
Using the Figma team library
If you're a designer looking to incorporate Pivotal UI into your designs, you can use the Figma team library by following the instructions in this video. If you need access to the video, please reach out in the #pivotal-ui Slack channel.
Installing from npm
The most common way to add Pivotal UI to your project is to use the npm package. The package includes all of Pivotal UI's CSS, Sass variables, and React components.
You will need to have Node installed. If you do not, see here for instructions. Node comes with
npm for managing dependencies, but you might prefer to use Yarn. If you do not have an existing project, you can create one with
npm init or
Once these are set up, install the
pivotal-ui Node module in your project like this:
# if using npm: npm install pivotal-ui # if using yarn: yarn add pivotal-ui
To use individual components, see the instructions on the pages for those components.
Consuming CSS from a CDN
For example, CSS for version 16.0.0 is available at http://d2bsvk2etkq8vr.cloudfront.net/pui-css/pui-components-16.0.0.css
These files can be included with a
<link> tag in an HTML file like this:
<link rel="stylesheet" href="http://d2bsvk2etkq8vr.cloudfront.net/pui-css/pui-components-16.0.0.css">