Quickreviews: Chakra-ui

chakra-ui - version: X.X.X

What are you then?

Chakra-UI is a react component library.

Main characteristics:

• Accessibility
• Themable
• Composable

The library focus mainly in accessibility. The rest of the main features I, personally, expect from a design system library, otherwise it means its very un-flexible.

Which might be its own feature on their own if you don't want to deal a lot with customization.

How does it work?

You install it into your react project with some peer-dependencies like react and you are good to go.

If you want you can easily customize the theme for your project by overriding the theme in emotion.

Now quickreview!

• The UI documentation is catchy, and especially to me because is minimalistic and well design.
• Design principles are present and very well explained.
• There are A LOT of components and the organization and aesthetics are very similar to tailwind.
• I have to emphasise documentation is super nice and snippets of code are not overwhelming like the ones from material-ui.
• I'll definitely check later what its being used for the docs because it looks neat, organize and very clear. Definitely a nice example to follow for your libraries.

Diving a little bit deeper

The library is getting traction and many people have contributed on creating a nice set of components.

Readme is not too long to make you cry, which is nice because sometimes design system libraries throw all the documentation at once and then when scanning its very tiring.

A few facts as today:

• It's using rollup to bundle the library.
• There are no tests present.
• There are some typescript types.
• There are 65 issues and 22 PRs. Orange flag.
• The library is 100kb gzip :O.
• There is one storybook playground that has a lot of very nicely presented components.
• Documentation it's a plus.

Conclusion

If you are looking for an implementation of components that look very similar to tailwind and has is a nice amount of documentation. This is definitely a library to check.

Depending on your use case I think chakra-ui should work out of the box so I'm gonna try it on my next side project and have a first contact with its components.

Scores (higher is better)

• Usefulness: 7/10.
• Code quality: 7/10.
• Documentation: 10/10.
• Browser support: 9/10.
• Potential: 10/10.

Overall: 8.6/10