Chakra UI

0
9K

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
Cerca
Categorie
Leggi tutto
Телевидение
World Fashion Channel Live TV.
World Fashion Channel – это международный телеканал о современных тенденциях в индустрии...
By Nikolai Pokryshkin 2022-11-01 08:49:23 0 29K
Arts, Culture and Entertainment
Crescendo (2020)
An outwardly ambitious and charismatic opera singer fights to maintain her stature while silently...
By Leonard Pokrovski 2022-10-02 20:28:40 0 27K
Business
What Is a Work Breakdown Structure (WBS)?
A Work Breakdown Structure (WBS) is a key project management tool that breaks down the total...
By Dacey Rankins 2025-05-15 14:47:07 0 5K
Colleges and Universities
The Role of Colleges and Universities in Modern Society
Colleges and universities play a pivotal role in shaping individuals and society as a whole. They...
By Dacey Rankins 2024-11-04 18:06:38 0 7K
Business
How Do Project Managers Handle Risks?
Effective risk management is one of the most critical responsibilities of a project manager....
By Dacey Rankins 2025-05-16 14:33:48 0 7K

BigMoney.VIP Powered by Hosting Pokrov