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
Suche
Kategorien
Mehr lesen
Business
How Can I Foster Intrinsic Motivation in My Team? Fueling Purpose, Autonomy, and Mastery at Work
As a leader, one of the most powerful questions you can ask is:“How can I foster intrinsic...
Von Dacey Rankins 2025-07-16 15:50:18 0 1KB
Hardware
Understanding Computer Hardware: The Backbone of Every Device
In the world of technology, hardware is the essential physical component that powers every...
Von Dacey Rankins 2025-01-24 18:07:02 0 8KB
Mental Health
Psychosis: Neuroimaging
The first brain image of an individual with psychosis was completed as far back as 1935 using a...
Von Kelsey Rodriguez 2023-06-05 19:02:07 0 9KB
Life Issues
Maleficent. (2014)
A vengeful fairy is driven to curse an infant princess, only to discover that the child may be...
Von Leonard Pokrovski 2023-05-03 20:52:38 0 20KB
Business
What Are the Applications of Management Science?
Management Science is a powerful tool that finds practical application across a wide range of...
Von Dacey Rankins 2025-07-02 15:09:00 0 2KB

BigMoney.VIP Powered by Hosting Pokrov