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 Typescript types from Gestalt?
You don't! We do not explicitly export our Typescript types. 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 React's type helper ComponentProps to use the component's types directly:
import { ComponentProps } from 'react'; ComponentProps<typeof ComponentName>['propName']
Does Gestalt have TypeScript support?
Yes. Gestalt officially supports and maintains TypeScript declaration files for our gestalt, gestalt-charts, and gestalt-datepicker packages.
Does Gestalt have Flow support?
No. Gestalt officially stopped supporting and maintaining Flow files for our gestalt, gestalt-charts, and gestalt-datepicker packages after v147.6.0.
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.ts --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.