Install & setup vite + react + typescript + ant design 5

Today, we will install and set up Vite, React, TypeScript, and Ant Design.

Install React Project With Vite

Install vite via npm:

npm create vite@latest

Install vite via yarn:

yarn create vite

Select react.

? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

Select react js with typescript.

? Select a variant: » - Use arrow-keys. Return to submit.
>  TypeScript
  TypeScript + SWC
  JavaScript
  JavaScript + SWC

Move to project directory and install dependencies.

cd project-name
npm install 
npm run dev

Install Ant Design 5

Install ant design 5 via npm:

npm install antd

Install ant design 5 via yarn:

yarn add antd

Import Ant Design’s CSS in your project, usually in the main.tsx file:

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import 'antd/dist/reset.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import ant design 5 button component in App.tsx.

App.tsx

import React from 'react';
import { Button, Space } from 'antd';
import { Typography } from 'antd';
const { Title } = Typography;

const App: React.FC = () => (
  <>
  <Title level={2}>Install & Setup Vite + React + Typescript + MUI 5</Title>
  <Space wrap>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </Space>
  </>
);

export default App;

Install React Project With Vite

Install Ant Design 5

Aaronn