Chakra UI

0
8KB

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
Pesquisar
Categorias
Leia mais
Outdoors
What gives people outdoor recreation
What gives people recreation in nature. Free space, the absence of crowds,...
Por FWhoop Xelqua 2022-11-12 13:10:13 0 20KB
Социальные проблемы
Американская история Икс. American History X (1998)
Лидер местной банды скинхедов Дерек Виньярд прочно удерживает авторитет в своём районе....
Por Nikolai Pokryshkin 2022-11-29 10:39:05 0 34KB
Paranormal
Unveiling the Enigma: Exploring the World of Paranormal Activities
Unveiling the Enigma: Exploring the World of Paranormal Activities Introduction: Paranormal...
Por Leonard Pokrovski 2024-06-10 23:00:40 0 15KB
Искусство, культура и развлечения
Пол Смит: Джентльмен и Дизайнер. Paul Smith: Gentleman and Designer. (2011)
Провокационный портрет известного английского дизайнера Пола Смита. У него 400 магазинов и...
Por Nikolai Pokryshkin 2023-06-04 14:02:11 0 29KB
Business
What Are the Benefits of Joining a Startup Incubator?
Starting a business can be a challenging and isolating journey, but joining a startup incubator...
Por Dacey Rankins 2025-04-24 16:54:05 0 9KB
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov