JavaScript
A set of React UI components that supports Pinterest’s design language

Gestalt

Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

View the full docs or Check out the Gestalt playground

Usage

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';

That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.

Development

Gestalt is a multi-project monorepo. The docs, components and integration tests are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

yarn
yarn test

Build and watch Gestalt:

cd packages/gestalt
yarn watch

Start the docs server:

cd docs
yarn start
open "http://localhost:8080"

Visit http://localhost:8080/ and click on a component to view the docs.

Using the Masonry playground:

cd test && yarn start
open "http://localhost:3000"

Running Masonry's integration tests. This will leave lots of Firefox processes hanging around, so please be warned.

./run_integration_tests

Releasing

The following outlines our release process:

• Checkout a new branch.
• Bump package version in packages/gestalt/package.json & update CHANGELOG.md.
• Open a pull request with the new version and land that in master.
• Once the version is bumped in master, checkout that commit locally.
• Publish the tag, npm package, and docs with: ./scripts/publish.js.
• Draft a release from the tag and update the release notes from the CHANGELOG at https://github.com/pinterest/gestalt/releases.