Discover Grommet, a design system that allows you to focus on the essential experience of your application.

Grommet: A design system made for ReactJS

With the introduction of React, the modular, declarative, efficient, and flexible JavaScript library for building user interfaces there were a lot of libraries that offered components for user interfaces as well, like Material UI etc. Today we want to introduce you Grommet, an awesome UI framework that is not only focused in the User Experience, but with the Developer Experience as well, Grommet.

What is Grommet?

The primary goal of Grommet 2.0 is to improve the Developer Experience (DX). Grommet has been around since October 2016, and has a lot of good feedback. Grommet is designed to make your design and development process agile and easier by baking in the stuff that is expected. Grommet is structured to foster active communication between designers and developers in hopes of creating better user experiences. Grommet is used is used by a variety of companies, so don't forget to take a loot to the showcase.

Why choose Grommet?

Grommet, as mentioned is a library of reusable UI components. Because such components are complicated to manage with simple HTML templates or with the model MVC, because the elements of composition are not granular enough to represent small reusable elements.  Grommet was created to align the design and developer workflow into one seamless experience. So it will be simple for everyone (that is familiarized with Components) to see how easy is to get started with Grommet.

Grommet Components

Grommet as every UI framework so to speak, offers a lot of components that can be easily embedded into your application with Grommet. Buttons, typography, UI elements, layout structures, visualization charts, icons, charts, media controllers etc:

Grommet Components

And they can be easily imported and used as a simple React component in your code.

Grommet NEXT

A newer version of Grommet, namely NEXT, is a new version of Grommet that has been developed based on the community feedback and the experience developing apps using Grommet. There are some things that are difficult to make with Grommet, like the necessity of special configuration to include some style, too much abstraction in some components or Lack of tree-shaking support. Such things are planned to be fixed on Grommet NEXT, so you can track progress on what is added and what is missing. You can use Grommet NEXT today if you want, but the component set is limited, and we are still testing things out. To use it change your package.json to point to the NEXT-stable branch:

     "grommet": "",

Contribute to the project

Grommet was built as a fully open-source project and is currently hosted on GitHub, so pull requests and issues reports are welcome.

Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.