CORE React is a React implemenation of Procore's design guidelines.


It is recommended to install @procore/core-react from NPM.


Install the peer dependencies. Review the core-react version support table for valid dependency ranges.


Named imports support tree shaking and types.

Component Usage

Building experiences with CORE React applies compound component design. This design pattern mirrors an HTML structure and allows our React component APIs to match closer to familiar element composition of HTML, e.g. a ol has li as children, opposed to an ol taking a specific items or data prop attribute, the children is already an array!

A single component import will have properties that are other components. The following are all React components

The subcomponents are expected to be children of the parent component.

With the exception of Form, a subcomponent should not have subcomponents as properties. A case like Modal.Header.Title should not exist, however a subcomponent can still render a subcomponent, e.g.:

Composing with children provides freedom of adding addition markup and logic as components where necessary. Reference the composing guide to learn more about using core-react to create rich components.

As components increase in complexity and UX interactions, APIs shift from composition and rely on supplying props of data and getters.

When dealing with Form, the third subcomponent indicates a conditional render. Please review Form docs on how to customize the props per view.


CORE React follow documentation based semantic versioning. Documented exports are versioned, while undocumented exports are not. Using undocumented exports is discouraged.

Archived Documentation