Chakra UI

0
8K

What is Chakra UI?

Have you ever struggled with whether to focus more on the back-end or front-end of your project? Well believe me, both are equally important.

I started using Chakra UI because I wanted to focus on my back-end code more than being stuck on "How to center a div element?".

Chakra UI is extremely simple to use, especially when you are familiar with how to use ReactJs components.

How to Get Started and Install Chakra UI

Inside your respective directory, install ChakraUI using Yarn or NPM

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

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

For React:

For ChakraUI to get initialised you first need to add <ChakraProvider> in your index.js file.

import React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
 // 2. Use at the root of your app
 return (
   <ChakraProvider>
     <Component />
   </ChakraProvider>
 )
}

For Next.js

Go to pages/_app.js and add the following lines of code:

import { ChakraProvider } from "@chakra-ui/react"
function MyApp({ Component, pageProps }) {
 return (
   <ChakraProvider>
     <Component {...pageProps} />
   </ChakraProvider>
 )
}
export default MyApp
Search
Categories
Read More
Business
How Does Technology, Particularly AI, Influence Startup Innovation?
In today’s fast-evolving business landscape, technology, especially artificial intelligence...
By Dacey Rankins 2025-03-21 14:15:44 0 8K
Activism
Human rights education and activism
What is activism? The word "activism" is only about 100 years old, at least in its current...
By FWhoop Xelqua 2022-11-19 14:01:26 0 23K
Food and Related Products
Chocolate and its history
The history of chocolate began in Mesoamerica. Fermented beverages made from chocolate date back...
By FWhoop Xelqua 2023-05-20 19:46:42 0 28K
Социальные проблемы
Жизнь других. The Lives of Others. (2006)
Сто тысяч сотрудников, двести тысяч информаторов. Вместе они — щит и меч партии, знаменитое...
By Nikolai Pokryshkin 2022-12-15 11:29:22 0 24K
Business
What Should I Focus On to Grow as a Manager?
Growing as a manager involves more than just meeting targets and managing tasks—it’s...
By Dacey Rankins 2025-05-13 16:04:22 0 4K
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov