Creating React(Vite) website UI with Chakra UI(Part 2)

Now in this tutorial part 2 we will test the Button component from Chakra UI to test whether our installation and configuration of Chakra UI is working properly or not.

We need to install Chakra UI first to do so we will run following command in the terminal.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Once above dependencies installation is completed. We need to integrate it in our project. Now, we need to add ChakraProvider to root of our project.

For adding ChakraProvider to root , we need to open main.jsx file and modify it as shown in below screen.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
      <ChakraProvider>
        <App />
      </ChakraProvider>
  </React.StrictMode>,
)

Once this process is completed, we can check by writing Button component from Chakra UI.

In following code, we have added Button component from Chakra UI to our App.jsx file.

import { Button } from "@chakra-ui/react"
function App() {
  return (
    <>
      <Button colorScheme='yellow'>Button</Button>
    </>
  )
}
export default App

Output of above code can be seen as shown in below screen.