Custom UI components with Ant Design

ActiveUI uses Ant Design as a basis to build more complex components. Therefore, to have an homogeneous "look and feel" in your ActiveUI-based application, you too should use Ant Design for baseline components such as buttons, text inputs, etc.

Adding Ant Design to your Project

To import Ant Design in your project, add antd as a dependency in your package.json.

Use the same version as the one used in ActiveUI SDK (currently 3.10.2) to make sure the Ant Design components you use will inherit ActiveUI SDK's theme.

Don't import antd/dist/antd.css in your project, ActiveUI SDK will already inject these style rules automatically.

Importing Specific Components

If you want to import Ant Design's <Button /> component for example, we recommend this syntax:

import Button from 'antd/lib/button';

Indeed, using import {Button} from 'antd';, you will end up bundling the code of all Ant Design's components, which will make your application's JavaScript asset bigger than needed. Apply the same logic for all the other Ant Design components.