Gestalt ·
![License](https://camo.githubusercontent.com/6c802ee85ecad81be025e471b596a6f72df75a560f1fbc52a488c8ec2155d99f/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f67657374616c743f7374796c653d666c6174)
Gestalt is Pinterest’s design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.
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
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 /packages/gestalt-codemods
.
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 -d
(dry run) and -p
(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 scriptsminor release
: add component / add component props / API change with codemodmajor release
: backwards incompatible API change without codemod
Example PR title: Avatar: Add outline prop
Install the DefinitelyTyped definitions.
Install via npm:
npm i --save @types/gestalt
Or via yarn:
yarn add @types/gestalt