DEV Community

Cover image for Chakra UI: the hidden treasures

Chakra UI: the hidden treasures

Axel Navarro on May 18, 2021

I found Chakra UI (by Sage) a few months ago, and I learned a lot of things from it. I've been coding in React since 2017, and I used Less, Sass, ...
Collapse
 
heyprotagonist profile image
Anguram Shanmugam

Yeah I agree on that, I'm more of a Sass guy. Then I get Tailwindcss as recommendation. But I really don't know why it's more like a mess to maintain. But achieved good Compression file size in production.

So, I started learning chakra-ui from last month. As you mentioned. The problem is documentation. TailwindCSS has an awesome documentation. But, here I'm really missing that.

Although the discord community is more active then you expect!

Let's hope they'll provide an awesome tools and docs in the future run.

Collapse
 
gsdev profile image
gshah2020

One of the main reasons I chose chakra-ui time and time again is how well they handle accessibility for you out of the box. I think it's an often overlooked benefit, but I know it's one of chakra's primary focuses internally - so much so that it's even featured front and center on their landing page.

Collapse
 
snopkowski profile image
Wojciech Snopkowski

The con: it's CSS in JS.

If you'd like to get up and running in no time, then Chakra is a way to go.
Last week I stumbled upon Chakra Templates, open source collection of ready to use components. That speeds up the process even more.

Collapse
 
alirezavalizade profile image
alireza valizade

It’s really nice UI frame work, most powerful but It’s not recommended for enterprise and large scale projects because of css in js performance issues. As the project grows the app becomes slow.
More and more I have experienced it. This is also written in documents.
So if you have plan to work on the project for long term better choose a different tool.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

I use Chakra every day but currently I try to learn Tailwind.

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

try me

Collapse
 
king11 profile image
Lakshya Singh

How do you think both of them compare ?

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Chakra is just css as props, so same vanilla syntax you use in css files works also in the props, tailwind from what I can tell is faster in production less boilerplate, with chakra you have lots of boilerplate from imports with tailwind you have them with the classes but compared to chakra less boilerplate because in chakra you have the Imports and then also the props for styling so a tailwind component looks cleaner even with lots of classes. How they compare, well both are nice but tailwind is clearly more polished and for production apps a nice library and I say this even I have a few production apps with chakra running.

Collapse
 
lucasota profile image
Lucas Otaño

Great post!

Collapse
 
guruprasaths profile image
guruprasath-s

Great Post. Material UI is also having similar and awesome stuffs.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

For me the worst, every app you build looks like a google product.