PUI 7.0 Release


The goals for the 7.0 release are:

  • Update and consolidate Buttons and Dropdowns
  • Replace Font Awesome Icons with SVGs
  • Make it easier for people to use SVGs

The Big Changes

  • Buttons and Dropdowns are visually redesigned
  • Button and Dropdown React Components are all new, see the conversion guide below
  • Iconography React component now uses SVGs instead of Font Awesome
  • Deprecated Gravatars, Checked Lists, and non-React Back To Top Component
  • Deprecate current spinners component. New spinners are waiting to be prioritized.

Full list: https://github.com/pivotal-cf/pivotal-ui/blob/master/CHANGELOG.md

Conversion Guide


The buttons all have updated styles, and there are fewer of them.

  • DefaultAltButton is removed. Use DefaultButton instead. You may want to set the alt prop to true. If you still want the shadows, use box shadows
  • LowlightButton is removed. It can be approximated with DefaultButton with flat set to true
  • HighlightButton is renamed to PrimaryButton
  • HighlightAltButton is removed, just use PrimaryButton. Marketing sites may want to use BrandButton. Web apps are discouraged from using BrandButton.


There are no longer 7 dropdown components (LinkDropdown, DefaultDropdown, HighlightDropdown, etc). There is only Dropdown. The Dropdown component takes many React props. To recreate the old LinkDropdown, you can use Dropdown with flat and link props set to true. Most of the other old dropdown styles have been removed. There are basically only three launcher styles now: default, flat, and split.

React Iconography

  • Use the src prop instead of the name prop
  • The Icon component will inline SVGs instead of using Font Awesome. Many of the icons may have different names and different layout properties.
  • Webpack svg-react-loader is now required for iconography. If you are using pui-react-tools, you will need to npm install the webpack loaders and upgrade pui-react-tools to version ^2.0.0.
  • Icons no longer take the size prop. Instead, they are sized at the local font size. If you want an icon with a different size, you can change the font size around that icon. For example, if you set the font size to 24px, the SVG should be 24px wide and 24px tall. You can also provide a style prop with width and height if that is more appropriate.

CSS Iconography

If you are using iconography, but not using React, it will be more difficult to use. All of the SVGs are inside of the pui-css-iconography node module. If you would like to use an icon, you can use the SVGs directly from the node module. If you do not mind black icons, you can serve up the SVGs and use them inside of img tags. If you need to color your icons, you need to copy the content of the SVG and put it directly into your html. CSS can then be used for colors.

CSS Alerts

Alerts look the same, but the css has changed from float to flexbox. If you have a multi-line alert, you may need to add an extra div directly inside of your alert wrapping your old contents. Also, the close button is no longer float: right, so it needs to be at the end of your alert html.


There are more breaking changes than usual in this release, it is possible we missed something. Please file issues on github or ask questions on the pivotal-ui slack channel.

PUI 6.0 Release


The goals for the 6.0 release are:

  • Remove React Bootstrap Dependency
    • This should make it much easier for teams to choose their version of React without causing dependency conflicts.
    • This will also make it easier in the future to use non-Bootstrap designs.
  • Add a couple new React Components

The Big Changes

  • Alert: The dismissable prop is now just a boolean. If you want a function that is called on dismissal, use the onDimiss prop.
  • Modals: The bsSize prop has been renamed to size.
  • React Bootstrap: Alerts, Grids, Modals and Tabs are now entirely different code paths. The goal was to replace all old functionality, but undocumented behavior may have changed.

Full list: https://github.com/pivotal-cf/pivotal-ui/blob/master/CHANGELOG.md

New Components

  • CopyToClipboard
  • CopyToClipboardButton
  • Svg

PUI 5.0 Release

  • The 5.0 release is a bump from React 14 to React 15.
  • If you have no warning messages in React 14, the React 15 upgrade should be simple.
  • All of the newest features in Pivotal UI are in the 4.0 release.

PUI 4.0 Release


The goals for the 4.0 release are:

  • Add and improve React components as needed by teams
  • Consolidate similar React components
  • Consolidate some styles
  • Improved CSS building

The Big Changes

  • The typography React component has been removed in favor of native headers
  • Header font weights default to normal
  • base text color has been darkened to improve contrast
  • OverlayTrigger now supports manual mode and does not use React Bootstrap
  • OverlayTrigger trigger prop is now a string and not an array
  • Tooltip is all new in order to work with new OverlayTrigger
  • Some components have been renamed, see conversion guide
  • CSS scales, traffic lights, and fancy select have been removed
  • React components are all ES6 classes for easier subclassing
  • pui CSS node modules can be directly imported with Webpack loaders

Full list: https://github.com/pivotal-cf/pivotal-ui/blob/master/CHANGELOG.md

New Components

  • Checkbox
  • Pagination
  • Toggle

Conversion Guide


pui-react-typography is no longer supported. Replace <DefaultH2>, <AlternateH2> or <MarketingH2> with <h2>. The headers will now be less bold. This is intended by the designers. If your application wants headers to be bigger and bolder, add CSS in your own application.


  • <BasicInput> becomes <Input>
  • <SearchInput> becomes <Input search>
  • <SimpleTabs> becomes <Tabs>
  • <SimpleTabsAlt> becomes <Tabs tabType="simple-alt">
  • <SortableTable> becomes <Table>
  • <OverlayTrigger trigger={['hover']}> becomes <OverlayTrigger trigger="hover">
  • Use TileLayoutItem instead of TileLayout.Item
  • Look for RadioGroup in pui-react-radio

Other changes

  • Stop using the fancy-select CSS class, just use regular selects. If you want a fancy chooser, consider dropdowns.
  • Provide a class to Input with the inputClassName prop instead of className.
  • DropdownItem no longer automatically wraps content in an a tag unless an href prop is provided.
  • The markup generated by tooltips is different. The classes are prefixed with 'pui-', like 'pui-overlay'.

CSS Compiling

We would like to deprecate Dr Frankenstyle due to its performance issues and maintenance cost. In PUI 4.0, you can use Webpack loaders instead. The combination of css-loader, file-loader and extract-text-webpack-plugin recreates the functionality of Dr Frankenstyle in much less time.

See the Webpack Config in React Starter. In React Starter NODE_ENV=production gulp assets will output a components.css file in addition to any fonts and images needed by that CSS into public.

This documentation generated using Hologram