In the quest to writing New Design system in React

Photo by UX Store on Unsplash

In the quest to writing New Design system in React

We are using the Ant design system as a base to implement our design system, which has got us covered from all aspects but from one thing, the customization and theming. So could not able to follow up with our design team's requirements, and lots of custom CSS overrides leads to poor maintainability.

So we started the quest to why not change the base, and started to explore with following contraints in our mind

  1. It should be extremely extendable in terms of styling

  2. It should be accessible out of the box

  3. has as many UI Components to build complex components

We have found that there are two categories of UI libraries which provide support above requirements

  1. Has a fully functional component structure and styling is ours

    1. Radix UI

    2. Headless UI

    3. Ariakit

    4. Reach UI

    5. React Components

  2. Has only core logic to come with our component structure and styles

    1. Downshift

    2. ZagJs

    3. React Aria

Each has its own advantages, We are in the process of evoluating each libs to build our deisgn system. The detaield analysis would come to next blog post.