Design Systems for React Applications with Ant Design

Material Design by Google. Fluent UI by Microsoft. These design systems enforce design patterns and rules that bring brand consistency to their companies' many products. When different products draw upon the same design system, they are bound to the same set of design principles and feel connected.

Anyone who has used Google Docs and/or Google Sheets can easily tell that they are affiliated with Google just by looking at the colors, components, typography, etc. used by them. If you only knew how to use these products, then learning another one of Google's many products, such as Google Slides, would take much less time. Since there will be interactions and elements that you may recognize from before, your experience with the new product already begins with some level of familiarity. This lets you navigate the controls and learn new functionality and tricks with greater ease.

Companies like Google and Microsoft have poured many resources developing these design systems. Yet, having these design systems at their disposal has allowed them to quickly create prototypes for new ideas and turn them into products that can be added to their ever-growing suite of products.

Building a comprehensive design system requires developers and designers to work together to implement a set of reusable components that can be applied in current and future products. Anytime a team starts a new project, they can reach for this toolbox of pre-made components and preselected colors, typography, etc. and deliver the same aesthetic and user experience.

A great (and effective) design system:

  • Coherently organizes everything, from primitive design elements and components to design patterns, all in one place.

  • Serves as a single source of truth for the entire organization.

  • Gives developers and designers a shared design language for communicating feature and interaction details.

  • Defines and maintains the brand's signature look.

  • Constantly evolves to reflect your users' needs while staying true to the brand. Teams can contribute to the design system's growing collection of best practices and patterns.

  • Accelerates the development of new products.

If you (and your team) cannot afford to allocate development time towards building your own design system from scratch, then you should consider a customizable, well-documented design system like Ant Design.

With over 70,000 stars on GitHub and adopted by large companies like Alibaba and Tencent, Ant Design (AntD) was designed to handle the complex design problems often encountered in enterprise-level products. It offers an extensive React component library (written in TypeScript) that supports:

  • Internationalization

  • Custom Theming

  • Date Formatting (Via a Third-Party Library Like date-fns or dayjs)

  • Multiple Environments

    • Modern Browsers (IE 11, Edge, Chrome, Firefox and Safari)

    • Server-Side Rendering

    • Electron

  • Third-Party Component Libraries That Follow the Ant Design Specification

Its emphasis on several design principles forms a solid design foundation that anyone can build upon:

  • Spacing

  • Alignment

  • Contrast

  • Repetition

  • Directness

  • Smooth Animations and Transitions

  • Immediate Visual Feedback

Below, I'm going to show you:

  • How to add Ant Design to a React application.

  • How to customize Ant Design's theme to match your brand's colors.

Adding Ant Design to a React Application#

To get started, scaffold a new React application with the Create React App and TypeScript boilerplate template.

Inside of this project's root directory, install the antd dependency:

Delete the contents of the src/App.css file.

Import Ant Design's styles at the top of this file, like so:

(src/App.css)

Import the <DatePicker /> component from antd and add it to the <App /> component. The <DatePicker /> component is an input field that, when clicked on, pops open a calendar widget for selecting a date.

Note: If you come across the error Could not find a declaration file for module 'react/jsx-runtime'., then bump up the version of @types/react from ^17.0.0 to ^17.0.3.

Run the application and visit it within a browser at localhost:3000:

Each time you pick a date from the calendar popup, the date's Moment object and its formatted string gets printed to the developer console.

If you want to replace Moment.js with a lightweight date library like date-fns, then create a custom <DatePicker /> component that's configured with this library.

Create a new file named DatePicker.tsx within the src directory.

Then, import the dateFnsGenerateConfig object from the library rc-picker/lib/generate/dateFns and generatePicker function from the library antd/es/date-picker/generatePicker. dateFnsGenerateConfig is a version of the <DatePicker /> component's configuration with methods that all manipulate dates using date-fns. We pass this configuration object to generatePicker function, which returns a <DatePicker /> component configured based on this object.

(src/DatePicker.tsx)

Inside of src/App.tsx, substitute the import statement...

With...

Rerun the application. Notice how the developer console prints a plain JavaScript date, not a Moment.js object, whenever you click on a date within the calendar popup.

Best of all, there are plenty of other components (e.g., widgets, layouts, etc.) available for use. Visit the "Components Overview" page of the Ant Design documentation site here for a list of all the components and information on how to use them.

Customize Ant Design's Theming#

To customize the default Ant Design theme, you will need to override the Create React App project's Webpack configuration.

Instead of ejecting the application, we can install the craco library, which lets you do everything react-scripts does, but taking into account modifications made to the Create React App project's Webpack configuration via a craco.config.js file:

Note: CRACO is an abbreviation for "Create React App Configuration Override."

Update the package.json npm scripts start, build and test with craco in place of react-scripts, like so:

(package.json)

Within the root of the project directory, add a craco.config.js file.

(craco.config.js)

Since Ant Design's styles are written in Less, you only need to change the value of LESS variables to change the theme's colors, typography, etc.

Rename the src/App.css file to src/App.less. Within this file, import the Less file, not the CSS file, of the Ant Design styles.

(src/App.less)

Within the src/App.tsx file, import this Less file.

(src/App.tsx)

Install the craco-less package, which is a craco plugin that provides Less support for Create React App applications:

Configure CRACO with this plugin. Using this plugin, modify the @primary-color Less variable to red.

The modifyVars option tells the plugin to modify the values of the specified Less variables.

Rerun the application. You will see that the primary color is no longer #1890ff, but is now red.

Next Steps#

This tutorial only scratches the surface of what's capable with Ant Design. Try customizing Ant Design to fulfill your own React application's needs.

Sources#