Grommet
Grommet is a React-based web UI framework and design system in the tradition of older frameworks like Bootstrap, or newer ones like the web incarnation of Material Design. It’s part of a new breed of React-based UI frameworks, the virtues of which I extoll in this post. See also the other examples listed there.
I say “framework and design system” because Grommet’s not just a set of UI components. It’s a broad web design system, with guidelines for everything from layout to language. It’s developed by a team at Hewlett Packard Enterprise, so its design perspective is based on their internal needs.
TL;DR
Grommet’s a comprehensive and opinionated framework. If its UX and aesthetic choices match your needs, it’s a great ready-to-use system with everything accounted for. If you’re looking for a good generic base to customize to your needs, it’s not the best choice; some of the UI choices are pretty nonstandard, and it’s not designed with deep customization in mind.
What’s great
- Layout with the
<Box />component
Where some UI frameworks ignore layout entirely, Grommet offers several layout components.<Box />is the most versatile one; it’s based on flexbox and takes props for all the flexbox features, as well as a few other conveniences like standard padding sizes. One of my favorite things in it is thepad.betweenprop, which lets you define padding between a box’s child components:
<Box direction="row" pad={{ between: 'medium' }}>
<Box pad="small" colorIndex="neutral-1">A</Box>
<Box pad="small" colorIndex="neutral-2">B</Box>
<Box pad="small" colorIndex="neutral-3">C</Box>
</Box>- Component APIs
Prop names are reused across a lot of the components. Also many of the components’ layouts are based on that<Box />component, and can take the same props and pass them through (e.g. margin, padding, background color). - Icon set
Grommet comes with a huge library of SVG icons, accessible in the<Icon />component. They match nicely with the flat, outlined style of the rest of the system.
- Visualization tools
Something Grommet has that I haven’t seen in many other frameworks is a large set of components for data visualization — everything from bar charts to world maps. If you need some easy dataviz tools, it’s nice to have a matching set that doesn’t require another library.
What’s not as great
- Difficult to customize
The creators of Grommet are pretty clear that it’s not designed for extensive customization. They make it easy to override the default fonts and colors, but beyond that there are a lot of details that require nastily specific CSS selectors to change, and many things that can’t be changed at all. - External CSS
All of the CSS for Grommet’s components are defined in SASS files that are separate from the components themselves. If you’re using CSS modules (I usually am), it requires a fair amount of contortion to avoid defining global styles to override anything you need to tweak about Grommet.
- Non-native UI controls
Several components, especially in the form controls, look pretty far off from any native UI. Again that’s fine if you’re willing in to buy in to the full Grommet aesthetic, but if you’re looking for a generic base to apply your own style to, these things stick out. In particular: form fields where the label’s positioned inside the border, select menus that look like text inputs but with an overly large carat and no clear active state. Often when I’m looking at a new UI framework I look at the date picker first, and Grommet’s is not my favorite — picking a time is tedious and the whole thing is awkwardly large.
All in all, Grommet is impressively broad in the controls it offers, and its style guide makes a lot of the little decisions for you. If you’re okay with how it looks and works, it’s a great, thoughtful framework. If you want more control over customization, there may be better alternatives out there.
This is the first post in a series where I’ll be digging into a few examples of the new breed of React-based UI frameworks. Read more below, and follow me on Medium to stay posted.
