Chakra UI

0
10K

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
Căutare
Categorii
Citeste mai mult
Ethnic and Regional
The most unusual sweets of the world
Almost all people tend to treat themselves to sweets. Residents of African countries, Japanese...
By FWhoop Xelqua 2022-11-21 13:16:29 0 21K
Internet
Google ads: interface and settings
Definition Google Ads is an advertising platform for self-setting advertising campaigns with...
By FWhoop Xelqua 2023-01-30 17:35:11 0 19K
Financial Services
How to make big amounts of money
How to Make Big MoneyThe desire to earn big money should have a practical implementation in the...
By FWhoop Xelqua 2023-06-13 19:49:49 0 21K
Спорт
Рокки. Rocky. (1976)
Филадельфия. Рокки Бальбоа — молодой боксёр, который живёт в захудалой квартирке и еле...
By Nikolai Pokryshkin 2023-04-15 11:56:09 0 26K
Business
What Are Common Mistakes to Avoid When Writing a Business Biography?
Writing a business biography can be a rewarding but challenging task. It requires careful...
By Dacey Rankins 2025-01-06 15:56:44 0 10K

BigMoney.VIP Powered by Hosting Pokrov