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
Suche
Kategorien
Mehr lesen
Телевидение
TV BRICS. Россия - Индия. Прямое вещание на Русском и Английском.
TV BRICS он лайн телевидение. Россия - Индия. Потенциальная аудитория 7,5 млн человек. Сделать...
Von Nikolai Pokryshkin 2022-12-12 20:36:10 0 28KB
Business
Do You Have Any Questions for Me?
Toward the end of most interviews, hiring managers will ask, “Do you have any questions for...
Von Dacey Rankins 2025-08-09 18:33:22 0 3KB
Television
FOX 29, Live TV. Philadelphia USA
Fox 29 — which may also be called Fox News 29, or WTXF — has a great live stream....
Von Nikolai Pokryshkin 2022-09-18 09:09:19 0 40KB
Business
What Is the Product Planning Process?
Product planning is the backbone of effective product management. It transforms a vision into...
Von Dacey Rankins 2025-08-20 15:40:13 0 2KB
Искусство, культура и развлечения
Шерлок младший. Sherlock Jr. (1924)
Б.Китон - киномеханик, который мечтает быть знаменитым детективом, как Шерлок Холмс. Влюбленный в...
Von Nikolai Pokryshkin 2023-04-02 21:01:16 0 39KB

BigMoney.VIP Powered by Hosting Pokrov