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
Electronics and Electrical
Types of Computers
Types of Computers Computers are distinguished by a variety of criteria, which are related to...
Por Leonard Pokrovski 2024-03-19 12:23:46 0 28KB
Financial Services
Ways to save money on your monthly bills
Finding ways to save money may be easier than you think. By setting aside just a few...
Por Mark Lorenzo 2023-05-19 20:00:06 0 10KB
Horror
Vertigo. (1958)
A former San Francisco police detective juggles wrestling with his personal demons and becoming...
Por Leonard Pokrovski 2023-01-18 20:17:00 0 18KB
Television
CYC - Christian Youth Channel. Live TV. USA.
Christian Youth Channel – CYC aka Coptic Youth Channel, is a free-to-air English Coptic...
Por Nikolai Pokryshkin 2022-11-19 13:12:15 0 31KB
Death Care
The Evolving Landscape of Death Care: Honoring Departed Loved Ones
In the grand tapestry of life, death is an inevitable thread. How we approach the end of life and...
Por Dacey Rankins 2024-05-29 19:10:38 0 17KB
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov