Chakra UI

0
7K

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
История
Семейка Крудс: Новоселье. The Croods: A New Age. (2020)
Такие харизматичные герои как члены клана Крудс просто не в силах усидеть на месте. Они смело...
By Nikolai Pokryshkin 2022-09-11 21:56:14 0 17K
Sport
Hoop Dreams (1994)
A film following the lives of two inner-city Chicago boys who struggle to become college...
By Leonard Pokrovski 2023-07-09 20:20:54 0 18K
Жизненные вопросы
Золотая лихорадка. The Gold Rush. (1925)
История о злоключениях извечного любимца публики, маленького бродяги, который на этот раз...
By Nikolai Pokryshkin 2023-03-17 15:22:14 0 16K
Tobacco
The Dangers of Smoking
On the dangers of smoking Smoking is one of the most significant threats to human...
By FWhoop Xelqua 2022-10-18 13:15:27 0 18K
Business
How to manage subscriptions and unsubscribes to on-site and off-site newsletters
There are 2 pieces of news: bad and good. The bad news is that your subscriber base is degraded...
By Dacey Rankins 2024-09-27 15:16:00 0 24K
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov