Skip to main content

Ant Design

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

Ant Design provides a React UI library antd that contains a set of high quality components and demos for building rich, interactive user interfaces.
Go to docs →

Less Support#

Less Support#

antd uses less as its preprocessor.

caution

Due to its incompatibility with storybook, less is not included in superplate.

To use less with antd in your project

  • First we should modify src/App.css to src/App.less, then import less file instead.
/* src/App.tsx */- import './App.css';+ import './App.less';
/* src/App.less */- @import '~antd/dist/antd.css';+ @import '~antd/dist/antd.less';
  • Then install craco-less and modify craco.config.js like below.
npm install craco-less
craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports = {  plugins: [    {      plugin: CracoLessPlugin,      options: {        lessLoaderOptions: {          lessOptions: {            modifyVars: { '@primary-color': '#1DA57A' },            javascriptEnabled: true,          },        },      },    },  ],};