install & setup vite + react + typescript + chakra ui

Install & Setup Vite + React + Typescript + Chakra UI

updated 21/01/23 By frontendshape

In this tutorial, we will see how to install & setup vite + react + typescript + Chakra UI.


Install React Project With Vite

Install vite via npm:

npm create [email protected]

Install vite via yarn:

yarn create vite


Select React

√ Project name: ... chakra-ui
? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
  Vue
>  React
  Preact
  Lit
  Svelte
  Others


Next, Select react js with TypeScript

√ Project name: ... chakra-ui
√ Select a framework: » React
? Select a variant: » - Use arrow-keys. Return to submit.
  JavaScript
>  TypeScript
  JavaScript + SWC
  TypeScript + SWC


Move to project and install & run npm:

 cd chakra-ui
 npm install
 npm run dev 


Install Chakra UI In React

Run below command to install chakra-ui in react.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion


After installing Chakra UI, you need to set up the ChakraProvider at the root of your application.

Go to the src directory and inside main.tsx, wrap ChakraProvider around App:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);


Now Test Chakra UI components.

App.tsx

import {  Heading, Flex } from "@chakra-ui/react";

export default function App() {
  return (
    <>
        <Flex height="100vh" alignItems="center" justifyContent="center">
          <Heading>Install Chakra UI In React JS</Heading>
        </Flex>
    </>
  );
}
chakra ui with react + typescript

chakra ui with react + typescript


Enter Your Search Query