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 vite@latest
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
