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
Cerca
Categorie
Leggi tutto
Programming
Python Asyncio
Asyncio is a library to write concurrent code using the async/await syntax. Asyncio is used as a...
By Jesse Thomas 2023-02-28 23:56:16 0 10K
Социальные проблемы
Капернаум. Capernaum. (2018)
12-летний Зейн не может точно ответить на вопрос, сколько у него братьев и сестер, но уверен, что...
By Nikolai Pokryshkin 2023-01-09 11:36:18 0 29K
Financial Services
Shifts in aggregate demand
Key points The aggregate demand/aggregate supply model is a model that...
By Mark Lorenzo 2023-03-29 20:02:04 0 11K
Mental Health
ADHD: Suicide Risk
Systematic reviews conducted in 2017 and 2020 found strong evidence that ADHD is associated with...
By Kelsey Rodriguez 2023-03-30 16:38:10 0 11K
Internet Broadcasts
The Rise of Internet Broadcast News: Redefining Media Consumption
The Rise of Internet Broadcast News: Redefining Media Consumption In an era characterized by...
By Leonard Pokrovski 2024-05-03 19:30:15 0 16K

BigMoney.VIP Powered by Hosting Pokrov