Chakra UI

0
6كيلو بايت

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
البحث
الأقسام
إقرأ المزيد
Business
Psychology of Brand Perception: How Colors, Fonts, and Images Affect Customers
Why do we buy clothes from the same brands, consider coffee in a certain chain of coffee shops to...
بواسطة Dacey Rankins منذ ٧ أشهر 0 6كيلو بايت
Жизненные вопросы
Могила светлячков. Grave of the Fireflies. (1988)
Последние дни Второй мировой войны, американская авиация бомбит беззащитные японские города. В...
بواسطة Nikolai Pokryshkin منذ ٢ سنوات 0 19كيلو بايت
Internet
Google Ads, part 9: How to Create an Advertisment
part 8: Google Ads : Mectrics (bigmoney.vip) Two basic elements of ads to start with... Heading...
بواسطة FWhoop Xelqua منذ ٢ سنوات 0 12كيلو بايت
Business
What Are the Best Small Business Loans or Grants Available?
Starting or expanding a small business often requires financial support. Fortunately, various...
بواسطة Dacey Rankins منذ ١٥ أيام 0 4كيلو بايت
Financial Services
Law of demand
Key points The law of demand states that a higher price leads to a lower...
بواسطة Mark Lorenzo منذ ٢ سنوات 0 7كيلو بايت
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov

Top sites Pokrov