Need help with gestalt?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

3.9K Stars 300 Forks Apache License 2.0 2.1K Commits 8 Opened issues


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

Services available


Need anything else?

Contributors list

Gestalt · NPM Version Cypress status License

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.

Visit the official Gestalt Documentation


The package can be installed via npm:

npm i gestalt --save
npm i gestalt-datepicker --save

Or via yarn:

yarn add gestalt
yarn add gestalt-datepicker


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.


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

Install project dependencies and run tests:

yarn test

Build and watch Gestalt & run the docs server:

yarn start

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


When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process. Codemods are organized by release in



Clone the Gestalt repo locally if you haven't already. Run the relevant codemod(s) in the relevant directory of your repo (not the Gestalt repo): anywhere the component to be updated is used. Example usage for a codebase using Flow:

yarn codemod --parser=flow -t={relative/path/to/codemod} relative/path/to/your/code

For a dry run to see what the changes will be, add the

(dry run) and
(print output) flags (pipe stdout to a file for easier inspection if you like).


Every commit to master performs a release. As a reviewer, ensure the correct label is attached to every PR. Please follow semantic versioning.

  • patch release
    : documentation updates / spelling mistakes in code / internal scripts
  • minor release
    : add component / add component props / API change with codemod
  • major release
    : backwards incompatible API change without codemod

Example PR title:

Avatar: Add outline prop

Typescript Support

Install the DefinitelyTyped definitions.


Install via npm:

npm i --save @types/gestalt

Or via yarn:

yarn add @types/gestalt

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.