logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Ant Design X of React
  • Changelog
    v1.0.0
  • Basic Usage
    • Usage with create-react-app
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
      New
  • Model Integration
    • OpenAI
    • Qwen
    • Others
  • Other
    • Contributing
    • FAQ

Usage with create-react-app

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

create-react-app is one of the best tools for developing React applications. In this guide, we'll use create-react-app to create a TypeScript project and introduce @ant-design/x.

@ant-design/x is based on the latest stable version of TypeScript (>=5.0.0), so make sure your project uses a compatible version.

Installation and Initialization

Before starting, you might need to install yarn, pnpm, or bun.

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
$ npx create-react-app antdx-demo --template typescript

The tool will automatically initialize a project scaffold and install the necessary dependencies for a React project. If you encounter network issues during this process, try configuring a proxy or using a different npm registry.

Next, navigate into the project and start it.

$ cd antdx-demo
$ npm run start

Your browser will open at http://localhost:3000/, and you should see a "Welcome to React" message if everything was successful.

Importing @ant-design/x

Here's the default directory structure created by create-react-app.

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

Now, install and import @ant-design/x using yarn, npm, pnpm, or bun.

npm iconnpm
yarn iconyarn
pnpm iconpnpm
Bun LogoBun
$ npm install @ant-design/x --save

Modify src/App.js to include the Bubble component from @ant-design/x.

import React from 'react';
import { Bubble } from '@ant-design/x';


const App: React.FC = () => (
  <div className="App">
    <Bubble content="Hello world!" />
  </div>
);


export default App;

Now, you should see the Bubble component from @ant-design/x on the page. You can continue building your application using other components. For more development processes, refer to the official create-react-app documentation.

Custom Theme

Refer to Customize Theme and use XProvider for theme configuration:

import React from 'react';
import { XProvider } from '@ant-design/x';


const App: React.FC = () => (
  <XProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
    <MyApp />
  </XProvider>
);


export default App;

@ant-design/x is written in TypeScript and provides complete type definitions, allowing you to enjoy component property suggestions and definition checks.

Now that we've successfully run the @ant-design/x component, start building your application!