Chakra UI

0
10KB

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
Rechercher
Catégories
Lire la suite
Business
What Opportunities Do You Offer for Professional Growth?
Professional growth is a priority for ambitious candidates seeking more than just a paycheck. For...
Par Dacey Rankins 2025-08-09 18:25:59 0 2KB
Business
Overall Satisfaction: Why It Matters and How to Measure It
Understanding how satisfied customers are with your product or service is one of the most...
Par Dacey Rankins 2025-07-24 18:16:05 0 3KB
Film
Top 5 Thrillers
The Night Agent (2023– ) Low-level FBI agent Peter Sutherland works in the basement of...
Par FWhoop Xelqua 2023-04-30 19:48:40 0 19KB
История
Моё тело вас закопает. My Body Will Bury You. (2021)
1860 год. Накануне объединения Италии в единое королевство южную часть полуострова наводнили...
Par Nikolai Pokryshkin 2022-09-11 21:25:00 0 25KB
Programming
Python Asyncio
Asyncio is a library to write concurrent code using the async/await syntax. Asyncio is used as a...
Par Jesse Thomas 2023-02-28 23:56:16 0 10KB

BigMoney.VIP Powered by Hosting Pokrov