Not sure which component you need? Take a look below or set up time with the Gestalt team.
Accessibility best practices at Pinterest.
Color palettes shared between Brand and Gestalt.
Values used within Gestalt to construct layouts and components.
Iconography and SVGs
Symbolic representations of an action or information.
A list of easy-to-copy layouts which have best battle tests.
The screen sizes that Pinterest operates on.
Fields & Forms
ComboBox is the combination of a Textfield and an associated Dropdown that allows the user to filter a list when selecting an option.
DatePicker is used when the user has to select a date or date range.
Dropdown displays a list of actions, options or links.
Fieldset creates a fieldset and legend for a group of related form items in order to clearly indicate related form items.
Label is used to connect a label with a form component in an accessible way.
NumberField allows for numerical input.
SearchField allows users to search for free-form content.
SelectList displays a list of actions or options using the browser’s native select.
TextArea allows for multi-line input.
TextField allows for multiple types of text input.
ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.
Badge is a label that indicates status or importance.
Callout is a banner displaying short messages with helpful information for a task on the page, or something that requires the user’s attention.
Modal displays content that requires user interaction.
Module is a container that holds content about one subject.
Popover is a floating view that contains a task related to the content on screen.
Sheets are surfaces that allow users to view optional information or complete sub-tasks in a workflow while keeping the context of the current page.
SlimBanner conveys brief information related to a specific section of a page.
Status is a graphic indicator of an element's state.
Toasts educate users on the content of the screen, provide confirmation when people complete an action, or simply communicate a short message.
Tooltip is a floating text label that succinctly describes the function of an interactive element.
Upsells are banners that display short messages that focus on promoting an action or upgrading something the user already has.
Pins & Imagery
Collage, similarly to Masonry, creates a deterministic grid layout that can absolutely position and virtualize images.
Icons are the symbolic representation of an action or information, providing visual context and improving usability.
Image is used to represent images.
Masonry creates a deterministic grid layout, positioning items based on available vertical space.
Video is used for media layout.
Box is a component primitive that can be used to build the foundation of pretty much any other component.
Column implements a 12-column system.
Containers are useful in responsively laying out content on different screens.
Flex is a layout component with a very limited subset of the props available to Box.
Layers allow you to render children outside the DOM hierarchy of the parent.
Letterboxes are useful if you have some source media which is larger than the area you want to display it in.
Mask is used to display content in a specific shape.
Pog is a lower-level functional component to show the active, hovered, & focused states of IconButton.
ScrollBoundaryContainer is needed for proper positioning when Popover is anchored to an element that is located within a scrolling container.
Sticky allows an element to become fixed when it reaches a threshold.
TapArea allows components to be clickable and touchable in an accessible way.
FixedZIndex and CompositeZIndex are utility classes that generate z-indices for Gestalt components.
ColorSchemeProvider is an optional React context provider to enable dark mode.
OnLinkNavigationProvider is a React context provider to externally control the link behavior of components further down the tree.
useFocusVisible manages focus interactions on the page and determines whether a focus ring should be shown.
useReducedMotion allows a user to request that the system minimize the amount of non-essential motion.