Step 7. Add Ant Design

Modern KBase user interfaces utilize Ant Design as the base component library.

Add Ant Design Component Library Support

cd react-app
yarn add -E antd @craco/craco craco-antd
yarn add -D -E nodemon

Set up craco

craco is a Create React App (CRA) customization tool. We are using it for now to allow us to integrate Ant Design theming, which is implemented as LESS variable overrides.

Replace the CRA script calls with craco script calls in package.json:
```
"scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
},
```
becomes
```
"scripts": {
     "start": "nodemon -w ./craco.config.js -w ./node_modules/@kbase/ui-lib/lib/custom/antd/theme.less --exec 'craco start'",
     "build": "craco build",
     "test": "react-scripts test"
},
```
Note that we are changing the definitions of the scripts. We can still use all of the standard CRA npm script commands start, build, and test.

Note that the test script is using the react-scripts script rather than the craco script – craco test current does not work (well) with the Ant Design less overrides.

Set up craco antd plugin

Add the craco customization file craco.config.js in the top level react-app directory:

 const path = require('path');
 const CracoAntDesignPlugin = require('craco-antd');

 const esModules = ['kbase-ui-lib'].join('|');

 module.exports = {
     jest: {
         babel: {
             addPresets: true,
             addPlugins: true,
             configure: (jestConfig, { env, paths, resolve, rootDir }) => {
                 jestConfig.transformIgnorePatterns = ['[/\\\\]node_modules[/\\\\](?!kbase-ui-lib|kbase-ui-components|antd/).+\\.js$'];
                 jestConfig.rootDir = './src';
                 jestConfig.moduleFileExtensions = ['ts', 'tsx', 'json', 'js'];

                 return jestConfig;
             }
         }
     },
     plugins: [
         {
             plugin: CracoAntDesignPlugin,
             options: {
                 customizeThemeLessPath: path.join(__dirname, 'node_modules/@kbase/ui-components/lib/custom/antd/theme.less'),
                 styleLoaderOptions: {
                     insert: 'body'
                 }
             }
         }
     ],
     webpack: {
         alias: {
             react: path.resolve('./node_modules/react'),
             redux: path.resolve('./node_modules/redux'),
             'react-redux': path.resolve('./node_modules/react-redux')
         }
     },
     devServer: {
         watchOptions: {
             poll: 1000
         }
     }
 };

Make sure it is still working
```
yarn test
yarn start
```
Add a component to see ant design work

The easiest way is to add a simple component, like a button, to the App component.
- Add this import
```
import { Button } from "antd";
```
- Within the render() method, below <p>Hello!</p> add:
```
<Button>Hi!</Button>
```
- Save the file
- If yarn start is not running, run it.
- You should see the button render in the browser

References

Next Step

Step 8. Add to KBase UI

-–