logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design of React
  • Changelog
    v5.25.4
  • Basic Usage
    • Getting Started
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
    • Usage with Farm
    • Usage with Refine
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • CSS Variables
      New
    • Use custom date library
    • Internationalization
    • Common Props
    • React 19 Compatibility
      New
  • Migration
    • V4 to V5
    • Less variables to Component Token
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ
Your First Example
1. Create a codesandbox
2. Use and modify an antd component
3. Explore more components
4. Next Steps
Test with Jest
Import on Demand
Customize your Workflow

Getting Started

contributors
  • ChangelogUsage with Vite

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    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

    Ant Design React is dedicated to providing a good development experience for programmers. Before starting, it is recommended to learn React first, and correctly install and configure Node.js v16 or above.

    The official guide also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript, and React. If you are just starting to learn front-end or React, it may not be the best idea to use the UI framework as your first step.

    Finally, if you are working in a local development environment, please refer to Scaffolding Guide to create a new project.


    Your First Example

    Here is a simple online codesandbox demo of an Ant Design component to show the usage of Ant Design React.

    import React from 'react';
    import { Button, Space, DatePicker, version } from 'antd';
    
    const App = () => (
      <div style={{ padding: '0 24px' }}>
        <h1>antd version: {version}</h1>
        <Space>
          <DatePicker />
          <Button type="primary">Primary Button</Button>
        </Space>
      </div>
    );
    
    export default App;
    Open on CodeSandboxOpen Sandbox

    Follow the steps below to play around with Ant Design yourself:

    1. Create a codesandbox

    Visit https://u.ant.design/codesandbox-repro to create a codesandbox -- don't forget to press the save button as well to create a new instance.

    2. Use and modify an antd component

    Replace the contents of index.js with the following code. As you can see, there is no difference between antd's components and typical React components.

    If you have already set things up by following the Use with create-react-app, replace the content of /src/index.js as follows:

    jsx
    import React, { useState } from 'react';
    import { DatePicker, message } from 'antd';
    import { createRoot } from 'react-dom/client';
    import './index.css';
    const App = () => {
    const [date, setDate] = useState(null);
    const [messageApi, contextHolder] = message.useMessage();
    const handleChange = (value) => {
    messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`);
    setDate(value);
    };
    return (
    <div style={{ width: 400, margin: '100px auto' }}>
    <DatePicker onChange={handleChange} />
    <div style={{ marginTop: 16 }}>
    Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
    </div>
    {contextHolder}
    </div>
    );
    };
    createRoot(document.getElementById('root')).render(<App />);

    3. Explore more components

    You can view the list of components in the side menu of the Components page, such as the Alert component. Plenty of examples are also provided in the component pages and API documentation as well.

    Click the "Open in Editor" icon in the first example to open an editor with source code to use out-of-the-box. Now you can import the Alert component into the codesandbox:

    diff
    - import { DatePicker, message } from 'antd';
    + import { DatePicker, message, Alert } from 'antd';

    Now add the following jsx inside the render function.

    diff
    <DatePicker onChange={value => this.handleChange(value)} />
    <div style={{ marginTop: 20 }}>
    - Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
    + <Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} />
    </div>

    Select a date, and you can see the effect in the preview area on the right:

    codesandbox screenshot

    OK! Now that you know the basics of using antd components, you are welcome to explore more components in the codesandbox. When reporting a bug with ant design, we also strongly recommend using codesandbox to provide a reproducible demo as well.

    4. Next Steps

    During actual real-world project development, you will most likely need a development workflow consisting of compile/build/deploy/lint/debug/ deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below:

    • Ant Design Pro
    • create-next-app
    • More scaffolds at Scaffold Market

    Test with Jest

    If you use create-react-app follow the instructions here instead.

    Jest does not support esm modules, and Ant Design uses them. In order to test your Ant Design application with Jest you have to add the following to your Jest config :

    json
    "transform": { "^.+\\.(ts|tsx|js|jsx)?$": "ts-jest" }

    Import on Demand

    antd supports tree shaking of ES modules, so using import { Button } from 'antd'; would drop js code you didn't use.

    Customize your Workflow

    If you want to customize your workflow, we recommend using webpack or vite to build and debug code. You can try out plenty of boilerplates available in the React ecosystem.

    There are also some scaffolds which have already been integrated into antd, so you can try and start with one of these and even contribute.