Component overview

Accessibility best practices at Pinterest.

Color palettes shared between Brand and Gestalt.

Values used within Gestalt to construct layouts and components.

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.

Buttons allow users to perform actions within a surface.

ButtonGroup is used to display a series of buttons.

IconButton allows users to take actions and make choices with a single click or tap.

Link allow users to click their way from page to page.

Avatar is used to represent a user.

AvatarGroup is used to both display a group of user avatars and, optionally, control actions related to the users group.

AvatarPair is used to display two avatars in an overlapping grouping.

Use Checkbox when displaying 3 or more toggle inputs.

se RadioButtons when you have a few options that a user can choose from.

Switch is used for single cell options that can be turned on and off only.

Datapoint displays at-a-glance data for a user to quickly view key metrics.

Table is a set of structured data that is easy for a user to scan, examine, and compare.

Tags are objects that hold text and have a delete icon to remove them.

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.

Pulsars bring focus to a specific element on the screen and act like training wheels to guide people towards the normal way to perform that action.

Spinner helps indicate that a surface's content or portion of content is currently loading.

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.

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.

PageHeader is used to indicate the title of the current page, as well as optional actions.

SegmentedControl may be used to group multiple selections.

Tabs may be used navigate between multiple URLs.

Collage, similarly to Masonry, creates a deterministic grid layout that can absolutely position and virtualize images.

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.

Card is used to highlight content in grids.

Divider is a light gray 1px horizontal or vertical line which groups and divides content in lists and layouts.

Heading allows you to show headings on the page & has a bigger line height than regular text.

Text is used for all text on the page.

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.