Components

Grommet components let you create attractive, reusable user interface elements allowing you to construct your experience with ease.

Grommet components greatly simplify the task of creating clear, well-designed, responsive experiences. All components are accessible, cross-browser compatible and support theme customization. Component flexibility is enhanced through configuration through properties.

For convenience of discovery, components are grouped by usage classification. Each group is described below, each component is listed by group to the left.

Layout
Layout components are the primary methods Grommet uses to structure content. Each of these elements can be considered the scaffolding or bones of much of the Grommet design.
Structure
Structural components provide page elements for easy reuse in your experience. These components are comprised of various interface elements to make it easier to design common experience scenarios.
Text
Text components provide a variety of ways to manipulate the content of your experience. Remember, when using Headings, be semantic! You tell your story with text, so ensure it’s easy to follow!
Controls
Controls are components that promote interaction with your experience. Each of these elements provides a method of interaction to help users complete their tasks.
Forms
The Form components provide users with a variety of data input methods (text-based, time-based, numeric, formatted content or queries) to help enhance their experience.
Listing
Listing components include Lists, Tables, and Tiles and are useful for displaying a collection of related items. All three support item selection and responsive layout.
Visualization
Visualization components provide a visual representation of data for clear and efficient information communication. Numerical data can be encoded as lines, bars or simple meters to visually communicate quantitative messages.
Icons
A large and growing collection of icons is provided for clear and efficent language-independent communication. All icons are vector-based for precise rendering in various sizes. Industry standard glyphs are used where appropriate.
Media
Photo and Video media are supported through the Carousel, Image, and Video components.
Utils
The Animate component provides simple enter/leave visibility animation. Other utility components assist REST communication, search and filter, and accessibility.