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 maintenance (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

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 do I add Gestalt as a dependency?

Check out our installation guide for instructions. Note: we recommend using 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?

Gestalt uses named exports — there is no default export. Simply import the components you need in your file:
import { Button, Text } from 'gestalt';

How do I import Flow types from Gestalt?

You don't! We do not explicitly export our Flow types — any types that are available externally are considered internal and subject to breaking changes without warning. We also recommend against manually copying type values into your codebase, as those are also subject to change and you will need to manually update your copied types.
The recommended way of accessing Gestalt types (e.g. for a wrapper component) is to use Flow's utility types to use the component's types directly:
$ElementType<React$ElementConfig<typeof ComponentName>, 'propName'>

Does Gestalt have TypeScript support?

Not officially. However, a group of dedicated engineers who work on internal tools at Pinterest created this package with TypeScript definitions. We hope to offer better official TypeScript support in the future, but currently lack the resources for proper support.

Component development

How do I get access to the Gestalt repo?

The 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 Playwright for our integration tests. If you want to run the tests locally:
yarn playwright:test

How do I update a visual snapshot for a specific test?

Run yarn playwright:test and specify a visual test file:
yarn playwright:test visual-test/Video.spec.mjs --update-snapshots

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

Is there any internal Pinterest documentation for Gestalt?

If you're a Pinterest employee, you can visit Pinterest's web platform documentation for Gestalt.