DEV Community

How to Create Modern Cards in Chakra UI & React JS ⚡️

Fredy Andrei on May 16, 2022

Sometimes creating a great UI requires, not just time, but attention as well. Even when it comes to some cards, the attention to structure, spacing...

Read full post

Lazar Nikolov • May 17 '22 • Edited

Looking good, @fredy! Hint: instead of using the useColorModeValue you can use the _dark pseudo prop. That'll clean up your code.

Example:

// remove the hook
// const boxBg = useColorModeValue("white !important", "#111c44 !important");
...
<Flex
   borderRadius='20px'
   bg="white"
   _dark={{
      bg: "#111c44",
   }}
   ...
>
...

Also, take a look at the Semantic Tokens feature! You can make a token from your "#111c44", and reuse it throughout your app.

You can add your article on our Resources Page. Just open a PR that adds your article in the configs/resources.json file.

Fredy Andrei • May 17 '22

Thanks for pointing that out @nikolovlazar ! I really appreciate it! It's an amazing feature that I didn't know is available in the Chakra UI! Thanks a lot! ⚡️

Hope this comment will help everyone! 🚀

admin-dashboards • May 16 '22

Chakra is really nice. Also the cards :)

Fredy Andrei • May 16 '22

It really is! Hope it helps! 😁

TheThirdRace • May 21 '22

Chakra-UI is an awesome library to quickly prototype pretty much anything.

The problem is when you start peaking behind the curtain.

You're in for quite a choc if you need:

reusable components between projects
the ability to use different themes beyond light/dark
to respect a recommended budget of 130KB to 170KB for the first load javascript bundle

To achieve any kind of success toward those metrics, you'll have to go against pretty much everything their docs encourage you to do. To solve some problems with tree-shaking, you'll have to rewrite some of their components from scratch.

I still love Chakra, but after 2 years of use, there are definitely problems at its core and the development has slowed down considerably in the last 8 months.