Chakra UI

0
9كيلو بايت

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
البحث
الأقسام
إقرأ المزيد
News
What Leadership Qualities Does the CEO Possess?
A CEO's leadership qualities are among the most defining elements of their effectiveness. Great...
بواسطة Dacey Rankins 2025-06-30 14:07:06 0 4كيلو بايت
Programming
Remove Keys from Dictionary - Python
In order to delete keys from the diction, you would have to use 'del'. Here's an example:x ...
بواسطة Jesse Thomas 2023-02-23 23:16:41 0 10كيلو بايت
Business
The benefits of the video blogger business: how to turn a hobby into income
What is the business of video bloggers and how to start a career Video blogging has long grown...
بواسطة Dacey Rankins 2024-09-11 12:04:19 0 10كيلو بايت
Television
Fox 61 CT Live TV. Hartford, Connecticut, USA
Fox CT (WTIC) is a Fox affilitate local TV channel from Hartford, Connecticut. The channel first...
بواسطة Nikolai Pokryshkin 2022-10-23 11:18:41 0 28كيلو بايت
Finance
10 countries with the largest gold reserves.
At the end of 2023, central banks around the world purchased 1037 tons of gold, the second...
بواسطة Dacey Rankins 2024-10-22 16:50:43 0 14كيلو بايت

BigMoney.VIP Powered by Hosting Pokrov