---
order: 5
title: Use in TypeScript
---
Let's create a TypeScript project by using `create-react-app`, then import `antd` step by step.
> We build `antd` based on latest stable version of TypeScript (`>=4.0.0`), please make sure your project dependency matches it.
---
## Install and Initialization
Ensure your system has installed latest version of [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/).
Create a new [cra-template-typescript](https://github.com/facebook/create-react-app/tree/master/packages/cra-template-typescript) project named `antd-demo-ts` using yarn.
```bash
$ yarn create react-app antd-demo-ts --template typescript
```
If you are using npm (we will use yarn in the following instructions, it's ok to replace yarn with npm)
```bash
$ npx create-react-app antd-demo-ts --template typescript
```
Then we go inside `antd-demo-ts` and start it.
```bash
$ cd antd-demo-ts
$ yarn start
```
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
## Import antd
```bash
$ yarn add antd
```
Modify `src/App.tsx`, import Button component from `antd`.
```tsx
import React from 'react';
import type { FC } from 'react';
import { Button } from 'antd';
import 'antd/dist/reset.css';
import './App.css';
const App: FC = () => (
);
export default App;
```
OK, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app).
`antd` is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check.
![](https://gw.alipayobjects.com/zos/antfincdn/26L5vPoLug/8d7da796-175e-40af-8eea-e7031ba09f9f.png)
> Don't install `@types/antd`.
## Advanced Guides
In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using [craco](https://github.com/gsoft-inc/craco) which is one of create-react-app's custom config solutions.
Install craco and modify the `scripts` field in `package.json`.
```bash
$ yarn add @craco/craco
```
```diff
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}
```
Then create a `craco.config.js` at root directory of your project for further overriding.
```js
/* craco.config.js */
module.exports = {
// ...
};
```
### Customize Theme
Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider:
```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
export default () => (
);
```
## Alternative ways
Follow manual in [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) to setup TypeScript development environment if you already create a project by [Use in create-react-app](/docs/react/use-with-create-react-app).
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
- [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript)
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)