Grommet - A UI framework to create intuitive and visually appealing React components

Subhashree Patra — Mon, 29 Jan 2024 11:07:23 +0000

What is Grommet ?
Grommet is a powerful UI framework for React that provides a set of pre-designed components and utilities to streamline the development of modern web applications.
It is developed and maintained by: Hewlett Packard Enterprise (HPE)
Grommet is ideal for businesses and developers who want to create accessible, visually appealing user interfaces with minimal effort or, use their existing codebases to create a richer, more engaging user experience.

Some popular apps that are developed using Grommet are:

Shopify
Twilio
Git hub
Sony

How is it different from Chakra UI?
Grommet and other popular React based UI frameworks provide a collection of pre-built and pre-styled UI components for building user interfaces.
But one of the key difference is Grommet is designed to be modern and minimalist design system, with a clean and simple aesthetic and mostly focuses on building mobile application.

The main difference is the range of components and features offered by each framework. While Chakra UI provides limited range of components that includes unique options like modals and drawers, Grommet in the other hand offers a wide range of components, including buttons, forms, icons, menus and many more.
In terms of performance and accessibility, both Chakra UI and Grommet are well optimized and provide good support for accessibility standards. However, Chakra UI uses the Emotion CSS-in-JS library to style its components, which can result in larger bundle size and slower the performance compared to Grommet's inline styling approach.

Key Features of Grommet

Rich Components
Flexible Layouts
Accessibility
Theming and Customizing

To know more about the features, visit Grommet, Grommet Icons, Grommet StoryBook

Different Layouts supported by Grommet:

Here is a simple UI that's developed using Grommet components:

Let's get started by setting up Grommet in your application

Using Grommet in the react application is pretty straight-forward. You can run the below npm or yarn commands to install the Grommet package.

You can see that we have installed styled-components while installing Grommet, its because its advisable to style the Grommet components using styled components.

Now Grommet components can be used along with other frameworks like material-ui. But if you want to use Grommet alone we need to wrap the App.js with the Grommet component so that we can use the default theme settings provided by Grommet out of the box.

Here the props,
full - means you want your application to cover the entire viewport of the window and its optional to pass.

theme - is the default settings provided by Grommet
and themeMode - is used to set the display either in Dark or Light

Customizing the default theme:
The default theme can be customized by overriding the styles as per your requirement( using a global Font or color across the application) by creating a customTheme object and passing it to the **theme **props in Grommet component.

Grommet also adheres to the WCAG guidelines

It provides a prop called a11yTitle which implicitly acts as an aria-label attribute and hence the developer doesn't have to explicitly pass the aria-label props in the component where needed.

DEV Community: Subhashree Patra

Grommet - A UI framework to create intuitive and visually appealing React components