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
Site içinde arama yapın
Kategoriler
Read More
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 3K
Социальные проблемы
Волк с Уолл-стрит. The Wolf of Wall Street. (2013)
1987 год. Джордан Белфорт становится брокером в успешном инвестиционном банке. Вскоре банк...
By Nikolai Pokryshkin 2023-02-08 11:17:12 1 25K
Fantasy
Fantasy Sports: Where Strategy Meets Passion
Fantasy Sports: Where Strategy Meets Passion Fantasy sports have revolutionized the way millions...
By Leonard Pokrovski 2024-06-22 02:41:08 0 16K
Entertainment
Exploring Kids and Teens Entertainment: From Screen Time to Creative Play
Exploring Kids and Teens Entertainment: From Screen Time to Creative Play Entertainment plays a...
By Leonard Pokrovski 2024-04-30 15:11:22 0 27K
Consumer Goods and Services
Consumer goods
Consumer Goods – Definition and 4 TypesConsumer goods are final goods that households or...
By FWhoop Xelqua 2023-07-23 18:00:54 0 26K
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov