Web component overview
Gestalt provides an extensive set of React components for use in building larger web experiences and patterns. They include interactive UI components and developer utilities to help with implemention.
Not sure which component to use? Set up time with the Gestalt team.
ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.
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.
Badge is a label that indicates status or importance.
Box is a component primitive that can be used to build the foundation of pretty much any other component.
Buttons allow users to perform actions within a surface.
ButtonGroup is used to display a series of buttons.
Callout is a banner displaying short messages with helpful information for a task on the page, or something that requires the user’s attention.
Use Checkbox when displaying 3 or more toggle inputs.
Collage, similarly to Masonry, creates a deterministic grid layout that can absolutely position and virtualize images.
ColorSchemeProvider is an optional React context provider to enable dark mode.
Column implements a 12-column system.
ComboBox is the combination of a Textfield and an associated Dropdown that allows the user to filter a list when selecting an option.
Containers are useful in responsively laying out content on different screens.
Datapoint displays at-a-glance data for a user to quickly view key metrics.
DateField is used when the user has to select a date. The user must input date values with a numeric keyboard.
DatePicker is used when the user has to select a date or date range.
Divider is a light gray 1px horizontal or vertical line which groups and divides content in lists and layouts.
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.
Flex is a layout component with a very limited subset of the props available to Box.
Heading allows you to show headings on the page and has a bigger line height than regular text.
HelpButton is an affordance that accompanies an element on the screen. It helps describe or provide assistance on how to use the accompanying element.
Icons are the symbolic representation of an action or information, providing visual context and improving usability.
IconButton allows users to take actions and make choices with a single click or tap.
IconButtonFloating provides an action that floats over the content and remains in place when scrolled.
Image is used to represent images.
Label is used to connect a label with a form component in an accessible way.
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.
Link allow users to click their way from page to page.
List allows users to view individual, but related, text items grouped together.
Mask is used to display content in a specific shape.
Masonry creates a deterministic grid layout, positioning items based on available vertical space.
Modal displays content that requires user interaction.
ModalAlert is used to alert a user of an issue, or to request confirmation after a user-triggered action.
Module is a container that holds content about one subject.
NumberField allows for numerical input.
OnLinkNavigationProvider is a React context provider to externally control the link behavior of components further down the tree.
OverlayPanels are surfaces that allow users to view optional information or complete sub-tasks in a workflow while keeping the context of the current page.
PageHeader is used to indicate the title of the current page, as well as optional actions.
Pog is a lower-level functional component to show the active, hovered, and focused states of IconButton.
Popover is a floating view that contains a task related to the content on screen.
PopoverEducational is a floating container that introduces users to elements on the screen. Used for education or onboarding experiences.
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.
Use RadioGroup when you have a few options that a user can choose from.
ScrollBoundaryContainer is needed for proper positioning when Popover is anchored to an element that is located within a scrolling container.
SearchField allows users to search for free-form content.
SegmentedControl may be used to group multiple selections.
SelectList displays a list of actions or options using the browser’s native select.
SheetMobile is a mobile only component. SheetMobile is a supplementary container that sits on top of the screen’s primary content.
SideNavigation is start-aligned and arranged vertically. It is used to navigate between page urls or sections when you have too many menu items to fit in horizontal Tabs
SlimBanner conveys brief information related to a specific section of a page.
Spinner helps indicate that a surface's content or portion of content is currently loading.
Status is a graphic indicator of an element's state.
Sticky allows an element to become fixed when it reaches a threshold.
Switch is used for single cell options that can be turned on and off only.
Table is a set of structured data that is easy for a user to scan, examine, and compare.
Tabs may be used navigate between multiple URLs.
Tags are objects that hold text and have a delete icon to remove them.
TapArea allows components to be clickable and touchable in an accessible way.
Text is used for all text on the page.
TextArea allows for multi-line input.
TextField allows for multiple types of text input.
TileData can be used to select multiple categories to compare with each other in a graph or chart view.
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.
Video is used for media layout.
WashAnimated is used to highlight content in grids.
FixedZIndex and CompositeZIndex are utility classes that generate z-indices for Gestalt components.
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.