5 Underrated React Design Systems for 2021
Tags: webdev, react, css, javascript
Published: 2021-02-19 07:33:45

---
title: "5 Underrated React Design Systems for 2021"
tags: ["webdev", "react", "css", "javascript"]
canonical_url: https://arif.co/posts/5-underrated-react-design-systems-2021/
published: true
---

Design systems give your budding project a jump start and more importantly a structure when the project continues to grow. These systems bring in a level of sophistication of thinking and uniformity. Their value lies beyond pre-made CSS/JS assets. Identifying the right design system in the initial phases is crucial for progress. I employ various metrics to pick one such as:
* Community support & acceptance
* Documentation
* a11y/i18n/l10n
* Component library
* Commit rate
* Backers

However when it is time to play aka. a throwaway project for ML/AI or Raspberry Pi, you should experiment with the budding ones. Below are 5 of my current experimental design systems; known and unknown. They may not check all the boxes above however have potential and are super fun. They are not Bootstrap, Ant Design, or Material.

## [Grommet](https://github.com/grommet/grommet)

> part design system, part framework, and all awesome

Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.

* [Demo](http://grommet.io/)
* [Github](https://github.com/grommet/grommet)

![Grommet v2](https://arif.co/posts/5-underrated-react-design-systems-2021/grommet.png)

## [Garden React Components - Zendesk](https://github.com/zendeskgarden/react-components)

> The source of truth for tools, standards, and best practices when building products at Zendesk.

Garden is a minimal and clean design system that provides a formidable base for react projects.

* [Demo](https://garden.zendesk.com/components)
* [Github](https://github.com/zendeskgarden/react-components)

![Garden React Components - Zendesk](https://arif.co/posts/5-underrated-react-design-systems-2021/zendesk.png)

## [U.S. Web Design System (USWDS)](https://github.com/uswds/uswds)

> The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.

The United States Web Design System includes a library of open source UI components and a visual style guide for U.S. federal government websites.

* [Demo](https://designsystem.digital.gov/)
* [Github](https://github.com/uswds/uswds)

![caption="U.S. Web Design System (USWDS)](https://arif.co/posts/5-underrated-react-design-systems-2021/uswds.png)

## [Priceline One](https://priceline.github.io/design-system/)

> Priceline.com Design System

In order to create a consistently great experience for our users, the design system is meant to be the single source of truth for user interface standards for both designers and developers.

Built off of the work of previous efforts, this project intends to consolidate those ideas into a living, well-documented, and growing system.

* [Demo](https://priceline.github.io/design-system/)
* [Github](https://github.com/pricelinelabs/design-system)

![Priceline One](https://arif.co/posts/5-underrated-react-design-systems-2021/priceline.png)

## [Ring UI - JetBrains](https://github.com/JetBrains/ring-ui)

> A collection of JetBrains Web UI components

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

* [Demo](https://jetbrains.github.io/ring-ui/master/index.html)
* [Github](https://github.com/JetBrains/ring-ui)

![Ring UI - JetBrains](https://arif.co/posts/5-underrated-react-design-systems-2021/ringui.png)

Hope you had fun reading!