Align your React App with Chakra UI
Building a new React project can be a little daunting when styling comes to mind. The concept of building a new app while simultaneously maintaining a solid aesthetic is no easy feat and it’s no wonder so many styling frameworks have popped up in response.
Material UI, Bootstrap, Semantic, are all incredibly popular and rightly so! However, if you are looking to build a beautifully streamlined app right off the bat, Chakra UI is a great place to start.
Before getting into all the tech stuff, it was created by Segun Adebayo who named it after Naruto. Honestly? Already sold.
If you’ve worked with Tailwind CSS and found similarities, yes, you’re correct. Chakra’s greatest asset is in its adaptation of previously built libraries and prettifying all of it. Seriously. Everything about it is pretty. Even the docs, which I will say areincredibly thorough and well-drafted.
Getting Started
If you already have a React app you need to style, setting up is pretty quick and easy.
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
or yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Once you’ve done this, make sure to add ChakraProvider at the root of your App.
Once you do this, customizing your theme is super easy. Chakra’s extendTheme function merges quickly and seamlessly with the rest of your app.
Now that you’re all set up, the Chakra world is your oyster! Anytime you want to use a styling, just import it from @chakra-ui/react and you have a whole new, streamlined world of styling at your fingertips.
Chakra has over 40 customizable components, and ALSO includes a dark-mode component that is easily customizable.
Bottom Line
Chakra is quick, easy, streamlined, and a lot of fun. If you want to play around and get a feel for it, checkout this fun visual editor created specifically for Chakra :)
I love coding but the visual aspect is crucial for me. I love knowing I can work with something that will help make my apps pretty and streamlined. While Bootstrap and Material UI are great choices, something about Chakra’s aesthetic will keep me coming back.
