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
Rechercher
Catégories
Lire la suite
Business
What Is the Difference Between a CEO and a President?
In many organizations, especially larger corporations, the titles Chief Executive Officer (CEO)...
Par Dacey Rankins 2025-06-13 17:44:27 0 3KB
Business
What Is a Project Management Plan?
A Project Management Plan is a comprehensive, formal document that outlines how a project will be...
Par Dacey Rankins 2025-05-15 14:34:45 0 3KB
Volleyball
Volleyball
Volleyball (English volleyball from volley - "blow from the flight" and ball - "ball") is a...
Par FWhoop Xelqua 2023-02-24 17:26:22 0 14KB
Programming
NodeOS
I am sure most programmers have heard of Node.js, but what about NodeOS? Yes, NodeOS,...
Par Jesse Thomas 2023-06-26 21:18:57 0 9KB
Искусство, культура и развлечения
Друзья на свою голову. A Friendly Tale... (2020)
Леа и Марк, Карин и Франсис – две пары закадычных друзей. Но когда скромная тихоня Леа...
Par Nikolai Pokryshkin 2022-09-30 20:35:52 0 21KB
image/svg+xml


BigMoney.VIP Powered by Hosting Pokrov