Frequently asked questions

Gestalt usage

What are the benefits of using the Gestalt library?

Using Gestalt guarantees adherence and compliance to Pinterest design standards and best practices which results in UI and UX consistency across surfaces.
Gestalt also provides:
  • Styled, tested, and accessible components
  • Right-to-left, internationalization, and dark-mode support
  • Low maintaince (automatic design and code updates cross-platform)
  • Well-documented components and continuous Gestalt team support
Gestalt increases designers and developers velocity with the highest design and code quality.

Component usage

How can I visualize which components use Gestalt?

Drag this link:
Gestalt usage visualiser
into your bookmarks toolbar. If you do not see the bookmarks toolbar, go to View and select 'Show Bookmarks Bar'.
  • Click the link in the bookmark bar.
  • Red is bad: all places that are not using Gestalt will have a red border around them.
  • Everything else is Gestalt (or using inline styles).

What is a boint?

A boint is a Pinterest specific unit of spacing that is equivalent to 4px. 1 boint = 4px, 2 boints = 8px, etc.
Gestalt component props such as margin and padding work with boint units.
padding 0 .. 12

How can add a new icon?

If you need an icon that is not listed on our
for an experiment, use the dangerouslySetSvgPath prop on Icon. If the asset is ready, we will happily add the icon to Gestalt!
To add it to Gestalt, get a streamlined & optimized version of the SVG not contain strokes / transforms / ...

How do I add Gestalt as a dependency?

Import exact versions. ^1.37.0 is imprecise and could import v1.38.0 which could affect snapshots from version to version. Check
semver documentation
for hints on the differences.

How do I import components from Gestalt?

Add the following to your import declarations:
import { Button, Text } from 'gestalt';

What's required to support IE11?

Gestalt supports IE11 currently, but you will need to use a polyfill because the css file uses css variables. Below is an example of how we set the polyfill up in the docs which should go in the <head /> of your html.
// Load polyfills for IE 11
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
    '<script src=""></script>' +
    '<script src=""></script>'

Component development

How do I get access to the Gestalt repo?

Gestalt repository
is public and you do not need special permissions to make pull requests.

How do I easily generate files for a component?

Run the following and replace "ComponentName" with the name of your component.
yarn generate ComponentName

What do we use for integration tests and how do we run the tests locally?

We use
for our integration tests. If you want to run the tests locally:
yarn playwright:test

What is Gestalt teachings and how do I add a video?

Gestalt teachings
is a youtube video playlist containing tips and tricks on how to use Gestalt. Use
this special collaboration link
to add your own videos to this list.

Automated releases

How does versioning work in Gestalt?

The Gestalt library development approach is continuous releasing. Each major, minor, and patch change is merged to master and released as the latest supported Gestalt version.
Check the release log.
When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process.
Read more about Codemods.

My pull request fails on "Semver / Require Label (pull_request)", how do I fix it?

Nothing you can do to fix it.
A Gestalt Core maintainer will add a semver label (patch release / minor release / major release) when reviewing a PR..

How do these automated releases work under the hood?

Automated releases use
GitHub actions
 with the
these release steps
for every merge on master:
  • Fetch semver label for the associated PR (patch / minor / major)
  • Check out the repository
  • Setup Node.js
  • Bump package.json version
  • Update file
  • Create GitHub release
  • Publish to npm
  • Update
    Gestalt documentation