Chakra UI

Add Chakra UI packages to React app

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

Add Chakra UI to React app

import React from "react";

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import { ChakraProvider } from "@chakra-ui/react";

import HomePage from "./pages/HomePage";

import AboutPage from "./pages/AboutPage";

import Navbar from "./components/Navbar";

import "./App.css";



function App() {

  return (

    <ChakraProvider>

      <Router>

        <Navbar />

        <Routes>

          <Route path="/" element={<HomePage />} />

          <Route path="/about" element={<AboutPage />} />

        </Routes>

      </Router>

    </ChakraProvider>

  );

}



export default App;