DEV Community

Yuichiro Tachibana (Tsuchiya)
Yuichiro Tachibana (Tsuchiya)

Posted on

Discuss: React component libraries compatible with emotion and TypeScript?

Hello,
I'm seeking a React component library that can be used with TypeScript, I can control the styles by emotion's css prop (or something similar), and is supporting theming.

I found the followings:

Do you have any other alternatives, or any suggestions?
Can you tell me what library you like, and what case you prefer it for?

I've been using Sancho UI, but it recently seems inactive and I'm looking for an alternative...

Top comments (10)

Collapse
 
franky47 profile image
François Best

I use Chakra UI in Next.js, and I really enjoy it. It's currently being entirely rewritten in TypeScript (the support is already great in the production branch, but having native types will make it even more awesome).

Collapse
 
whitphx profile image
Yuichiro Tachibana (Tsuchiya)

Thank you!
It sounds nice, and yes, Chakra seems very active and growing.
Do you think it has some advantages over other libraries?

Collapse
 
franky47 profile image
François Best • Edited

I'm not familiar with the other libraries you mentioned, but what I like in Chakra is:

  • Accessibility by design
  • Style props†
  • Complete set of UI elements, easy to override and compose

† I was a big fan of the styled-components approach, but it generates a lot of boilerplate to override styles locally, whereas the styled-system / style props approach makes it really easy, at the cost of mixing style and functional props, but which is an acceptable trade-off IMHO.

Thread Thread
 
whitphx profile image
Yuichiro Tachibana (Tsuchiya)

Thank you!

I have been using only the bare css prop of emotion to customize predefined components, but not styled-system... and yes, my concern is the additional overhead, but your comment below is one answer.

the cost of mixing style and functional props, but which is an acceptable trade-off IMHO.

That seems to be a good option to choose!

And other points are also attractive.

easy to override and compose

Yes, this is one thing I think is important and what I need css prop (or styled system!) for.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
whitphx profile image
Yuichiro Tachibana (Tsuchiya) • Edited

Thank you!
I didn't know that Tailwind can be used with CSS-in-JS like emotion.
😮dev.to/lpbayliss/how-and-why-i-use...

Collapse
 
whitphx profile image
Yuichiro Tachibana (Tsuchiya)

Chakra UI looks like Tailwind CSS + emotion...?

Collapse
 
cadams profile image
Chad Adams • Edited

Ant design ant.design/docs/react/introduce it’s made for enterprise but it’s free. You get way more components than material ui. Plus imo I think it looks better than material design.

Collapse
 
whitphx profile image
Yuichiro Tachibana (Tsuchiya)

Thank you!
Yes, I agree that Material Design is not much good and Ant looks cool.

To customize the predefined components, developers should edit Less files?
My concern is:

  • It seems we need a little bit additional works to do it with Webpack, or CRA
  • Does it support switching theme at runtime (e.g. switching light/dark modes)?
Collapse
 
jrgplz profile image
Jorge Plaza

Good luck with responsive! 😅