GETTING STARTED WITH CHAKRA UI

If you are a frontend developer that loves to develop with React.js, and you need a library that can speed up your work, productivity, make you write less code and help you design excellent user friendly and responsive UI, then CHAKRA UI is your guy!.

I used to develop React applications before with Tailwindcss, at least that's faster than while using vanilla CSS.

Recently I built a very big app with React.js and Tailwindcss for a client, and I built another with React.js and Chakra UI, the difference is clear.

With Tailwind, I had to code out every component, and that consumed a lot of time.

NOTE: If you are just starting out, I would advice you learn and understand the fundamentals before you try out any frameworks.

But while I was working with Chakra UI, I finished a very big app in about a week.

I was able to achieve this because I used Chakra UI which gave me most of the components I needed for the app, so all I needed to do was refactor it so I can reuse wherever I needed that component again.

This strategy sped up my productivity x3 and it made my work as a frontend developer easy and less stressful.

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

I know by now you are wondering, HOW DO I START WITH CHAKRA UI?.

The sweetest thing about Chakra UI is, their documentation is very easy to grab and understand.

If you have used tailwindcss before or material UI, then understanding Chakra UI will be a walk over for you.

HOW TO GET STARTED

STEP 1:

Install Chakra UI into your React application

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

STEP 2

Set up Chakra provider inside the root of your React application.
Most likely your index.js file

import react from 'react'
import { ChakraProvider } from '@chakra-ui/react'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
   <ChakraProvider>
        <App />
    </ChakraProvider>
  </React.StrictMode>
);

STEP 3

You are ready to start using Chakra UI in your react applications

import { Box, Text } from '@chakra-ui/react'

export default function App(){
return ( 
     <Box>
        <Text>WELCOME TO CHAKRA UI</Text>
     </Box>
)

Read more from their documentation

Comments

[Diego de Fonte]

This articicle was useful to me, even when I pratically never used yet these frameworks like react.js and others, but because I'm beginner by on it. So, motive which this article helped me is, because some infos like vanilla Css and tailwindcss are blew my mind, and I'll find out more and more.

[Candie]

Thanks for reading, I'm happy you found it useful 😍