Recommended React application frameworks
For application framework integration with Ant Design, the recommended frameworks are: umi, remix, and refine.
getting-started
257 notes in this subject, read out of this brain and free to use. This is page 3 of 5.
Recommended flow diagram libraries
For flow and diagram creation, the recommended libraries are: pro-flow, react-flow, and x6.
Recommended phone input libraries
For phone number input, the recommended libraries are: react-phone-number-input and antd-phone-input.
Recommended AI chat application library
The recommended library for AI conversational applications is Ant Design X.
Recommended PDF libraries
For PDF handling, the recommended libraries are: react-pdf and @react-pdf/renderer.
Recommended gesture library
The recommended React gesture library is use-gesture.
SSR inline styles with @ant-design/cssinjs
To extract styles during server-side rendering using inline styles, use the @ant-design/cssinjs@2.x library. Create a cache with createCache(), wrap your app with StyleProvider passing the cache, render the app to a string with renderToString(), then extract the styles from the cache using extractStyle(cache). Finally, inject the extracted styleText into the HTML head. This approach reduces additional network requests but increases HTML body size and impacts first contentful paint.
Generate Ant Design CSS file script
Create a scripts/genAntdCss.tsx file with: import fs from 'fs'; import { extractStyle } from '@ant-design/static-style-extract'; const outputPath = './public/antd.min.css'; const css = extractStyle(); fs.writeFileSync(outputPath, css);
Two strategies for SSR style handling
Ant Design supports two SSR style strategies: Inline styles (extracting needed styles at render time to reduce network requests but increase HTML size and impact first paint), and Static export (pre-baking component styles to CSS files that are referenced in pages, allowing cache hits on traditional CSS patterns but requiring separate baking for multi-theme scenarios).
SSR static style extraction with @ant-design/static-style-extract
For static CSS file generation in SSR, use @ant-design/static-style-extract. Install ts-node, tslib, and cross-env as dev dependencies. Create a tsconfig.node.json with strictNullChecks, module set to NodeNext, jsx set to react, and esModuleInterop enabled. Write a script that imports extractStyle from @ant-design/static-style-extract, calls it to get CSS, and writes the result to a file using fs.writeFileSync(). This approach allows styles to be cached across page visits like traditional CSS, but requires separate baking for multi-theme setups.
On-demand CSS extraction in Next.js _document.tsx
In Next.js _document.tsx, override getInitialProps to create a cache, intercept renderPage with enhanceApp to wrap the App with StyleProvider, call doExtraStyle(cache) after getting initial props, and inject a link tag with the returned filename in the styles array. This generates CSS files only for styles actually used on each page.
On-demand CSS extraction with doExtraStyle utility
The doExtraStyle function extracts CSS on-demand and generates a hashed filename. It accepts options: cache (required, a Cache entity), dir (optional, default 'antd-output'), baseFileName (optional, default 'antd.min'). The function creates an MD5 hash of the CSS content, generates a filename with the first 8 characters of the hash, and returns the path relative to static/css. If the CSS hash matches an existing file, it returns the existing path without rewriting.
Next.js package.json scripts for CSS generation
Configure predev and prebuild scripts to run the CSS generation script before Next.js starts or builds. Example: "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx" and "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"
Import generated Ant Design CSS in Next.js
In a Next.js pages/_app.tsx file, import the generated antd.min.css file at the top of the file before other stylesheets. Also wrap the component tree with StyleProvider and set hashPriority to 'high'. Example: import '../public/antd.min.css'; and <StyleProvider hashPriority="high"><Component {...pageProps} /></StyleProvider>
Import and use Ant Design Button component in Farm
To use Ant Design Button in a Farm project, import React and Button from antd in src/main.tsx, then render it in your component. Example: import React from 'react'; import { Button } from 'antd'; export function Main() { return <div><Button type="primary">Button</Button></div>; }
Setup Ant Design project with Farm build tool
To create a new Ant Design project using Farm: Run `npm create farm@latest`, `yarn create farm@latest`, `pnpm create farm@latest`, or `bun create farm@latest` depending on your package manager. During initialization, select the React template. Navigate to the project directory and run `npm install` followed by `npm start`. The development server runs at http://localhost:9000.
Install antd package in Farm project
After setting up a Farm project, install Ant Design using your package manager: `npm install antd --save`, `yarn add antd`, `pnpm install antd --save`, or `bun add antd`.
Farm project setup commands
Create a new Farm project with `npm create farm@latest`, `yarn create farm@latest`, `pnpm create farm@latest`, or `bun create farm@latest`. Enter the project directory and run `npm install` followed by `npm start` to launch the development server.
Using Ant Design with Farm build tool
Farm is a Rust-based fast build engine for web programs and JavaScript libraries. To use Ant Design with Farm, create a new project with the Farm CLI, select the React template, then install antd via npm/yarn/pnpm/bun and import components. The development server runs on http://localhost:9000 by default.
Basic Ant Design Button import in Farm
To use Ant Design components in a Farm project, import them from the antd package. Example: import { Button } from 'antd'; then use <Button type="primary">Button</Button> in the component.
Installing Ant Design in Farm
Install Ant Design using: `npm install antd --save`, `yarn add antd`, `pnpm install antd --save`, or `bun add antd`.
Customizing luxon DatePicker behavior
luxon default behaviors can be customized by extending the luxonGenerateConfig object and passing the modified config to DatePicker.generatePicker. For example, override getWeekFirstDay(locale) to customize the first day of the week. Changes to luxon configuration may cause unexpected behavior changes, so boundary cases should be tested.
Custom luxon DatePicker with configuration example
Example of creating a custom DatePicker with modified luxon configuration: import luxonGenerateConfig from '@rc-component/picker/generate/luxon'; import { DatePicker } from 'antd'; import type { DateTime } from 'luxon'; const customLuxonConfig = { ...luxonGenerateConfig, getWeekFirstDay(locale) { // Write your custom implementation here }, }; const MyDatePicker = DatePicker.generatePicker<DateTime>(customLuxonConfig); export default MyDatePicker;
Ant Design default date library
Ant Design uses Day.js by default to handle date and time issues. Day.js uses an immutable data structure with better performance and a size of only 2KB, with an API design completely consistent with moment.js.
Custom date libraries supported
Ant Design supports replacing Day.js with other custom date libraries including moment.js, date-fns, and luxon.
generatePicker method for custom date library
To create a custom DatePicker component using a different date library, use the generatePicker method from DatePicker (or generateCalendar from Calendar) as a helper function. Pass the appropriate generate config from @rc-component/picker/generate. For moment.js, import momentGenerateConfig from '@rc-component/picker/generate/moment' and call DatePicker.generatePicker<Moment>(momentGenerateConfig).
Custom DatePicker with moment.js example
Example of creating a custom DatePicker component with moment.js: import momentGenerateConfig from '@rc-component/picker/generate/moment'; import { DatePicker } from 'antd'; import type { Moment } from 'moment'; const MyDatePicker = DatePicker.generatePicker<Moment>(momentGenerateConfig); export default MyDatePicker;
Custom TimePicker implementation
To create a custom TimePicker component, wrap the custom DatePicker with picker='time' mode set to undefined, using React.forwardRef for ref forwarding. The TimePicker extends from PickerTimeProps<YourDateType> with the 'picker' prop omitted from the type signature.
Custom TimePicker with moment.js example
Example of creating a custom TimePicker component with moment.js: import * as React from 'react'; import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker'; import type { Moment } from 'moment'; import DatePicker from './DatePicker'; export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {} const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => ( <DatePicker {...props} picker="time" mode={undefined} ref={ref} /> )); TimePicker.displayName = 'TimePicker'; export default TimePicker;
date-fns custom date library support
date-fns is supported via the custom component method starting from antd version 4.5.0 and later. Use dateFnsGenerateConfig from '@rc-component/picker/generate/dateFns' and call DatePicker.generatePicker<Date>(dateFnsGenerateConfig).
Custom Calendar with moment.js example
Example of creating a custom Calendar component with moment.js: import momentGenerateConfig from '@rc-component/picker/generate/moment'; import { Calendar } from 'antd'; import type { Moment } from 'moment'; const MyCalendar = Calendar.generateCalendar<Moment>(momentGenerateConfig); export default MyCalendar;
antd-moment-webpack-plugin alternative method
An alternative to custom components is using the @ant-design/moment-webpack-plugin webpack plugin, which replaces Day.js with moment.js without requiring any code modifications. Install the plugin and add it to webpack config: new AntdMomentWebpackPlugin().
Custom DatePicker with date-fns example
Example of creating a custom DatePicker component with date-fns: import dateFnsGenerateConfig from '@rc-component/picker/generate/dateFns'; import { DatePicker } from 'antd'; const MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig); export default MyDatePicker;
luxon date library support version
luxon is supported as a custom date library starting from antd version 5.4.0 and later.
luxon differences from dayjs
luxon has several differences from dayjs: (1) It uses native browser Intl API instead of its own locale implementation. (2) The first day of the week is always Monday regardless of locale. (3) Week numbers in a year may differ (ISO week rules are used). (4) Short weekday formats may vary by locale (possibly 3 characters instead of 2). (5) Selected week label format differs (e.g. '2021-01' instead of '2021-1st').
App Router sub-component import limitation
Next.js App Router does not currently support using sub-components via dot notation like `<Select.Option />` and `<Typography.Text />`. Import them directly from their path instead to resolve this issue.
Pages Router _document.tsx implementation
For Next.js Pages Router, create or rewrite pages/_document.tsx with StyleProvider from @ant-design/cssinjs to extract and inject antd's first-screen styles: `import React from 'react'; import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'; import Document, { Head, Html, Main, NextScript } from 'next/document'; import type { DocumentContext } from 'next/document'; const MyDocument = () => (<Html lang="en"><Head /><body><Main /><NextScript /></body></Html>); MyDocument.getInitialProps = async (ctx: DocumentContext) => { const cache = createCache(); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => (<StyleProvider cache={cache}><App {...props} /></StyleProvider>), }); const initialProps = await Document.getInitialProps(ctx); const style = extractStyle(cache, true); return { ...initialProps, styles: (<>{initialProps.styles}<style dangerouslySetInnerHTML={{ __html: style }} /></>), }; }; export default MyDocument;`
Pages Router setup with @ant-design/cssinjs
When using Next.js Pages Router, install @ant-design/cssinjs version 2.x with: npm: `$ npm install @ant-design/cssinjs --save`; yarn: `$ yarn add @ant-design/cssinjs`; pnpm: `$ pnpm install @ant-design/cssinjs --save`; bun: `$ bun add @ant-design/cssinjs`. The version must match the version in antd's node_modules to avoid multiple React instances. Use `npm ls @ant-design/cssinjs` to check the local version.
Next.js installation command
To create a Next.js project, run one of the following commands: npm: `$ npx create-next-app antd-demo`; yarn: `$ yarn create next-app antd-demo`; pnpm: `$ pnpm create next-app antd-demo`; bun: `$ bun create next-app antd-demo`.
Install antd with package managers
To install antd in a Next.js project, use one of these commands: npm: `$ npm install antd --save`; yarn: `$ yarn add antd`; pnpm: `$ pnpm install antd --save`; bun: `$ bun add antd`.
App Router setup with @ant-design/nextjs-registry
When using Next.js App Router, install @ant-design/nextjs-registry with: npm: `$ npm install @ant-design/nextjs-registry --save`; yarn: `$ yarn add @ant-design/nextjs-registry`; pnpm: `$ pnpm install @ant-design/nextjs-registry --save`; bun: `$ bun add @ant-design/nextjs-registry`. Then wrap children with AntdRegistry in app/layout.tsx to extract and inject antd's first-screen styles into HTML to avoid page flicker.
Using antd components in Next.js Pages Router
In page files within the Pages Router, import and use antd components directly. Example: `import React from 'react'; import { Button } from 'antd'; const Home = () => (<div className="App"><Button type="primary">Button</Button></div>); export default Home;`
Installing antd in a project
Install antd using one of these commands: `npm install antd --save` (npm), `yarn add antd` (yarn), `pnpm install antd --save` (pnpm), or `bun add antd` (bun).
Basic Button component import and usage in Next.js
Import the Button component from antd and use it in a page component. Example: `import React from 'react'; import { Button } from 'antd'; const Home = () => (<div className="App"><Button type="primary">Button</Button></div>); export default Home;`
Configuring antd styles in Next.js Pages Router _document.tsx
Modify `pages/_document.tsx` to extract and inject antd styles on the server side. The file should import `createCache`, `extractStyle`, and `StyleProvider` from `@ant-design/cssinjs`, and use them in the `getInitialProps` method to wrap the app with `StyleProvider` and extract styles into a `<style>` tag. Example: `import React from 'react'; import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'; import Document, { Head, Html, Main, NextScript } from 'next/document'; import type { DocumentContext } from 'next/document'; const MyDocument = () => (<Html lang="en"><Head /><body><Main /><NextScript /></body></Html>); MyDocument.getInitialProps = async (ctx: DocumentContext) => { const cache = createCache(); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => (<StyleProvider cache={cache}><App {...props} /></StyleProvider>), }); const initialProps = await Document.getInitialProps(ctx); const style = extractStyle(cache, true); return { ...initialProps, styles: (<>{initialProps.styles}<style dangerouslySetInnerHTML={{ __html: style }} /></>), }; }; export default MyDocument;`
Creating a Next.js project with antd
To create a new Next.js project for use with Ant Design, use one of these commands: `npx create-next-app antd-demo` (npm), `yarn create next-app antd-demo` (yarn), `pnpm create next-app antd-demo` (pnpm), or `bun create next-app antd-demo` (bun). After initialization, navigate to the project directory with `cd antd-demo` and start the development server with `npm run dev`. The application will be accessible at http://localhost:3000/.
Using App Router with antd in Next.js
When using Next.js App Router with antd components, install `@ant-design/nextjs-registry` to enable first-screen style extraction and prevent page flashing. Use the commands: `npm install @ant-design/nextjs-registry --save` (npm), `yarn add @ant-design/nextjs-registry` (yarn), `pnpm install @ant-design/nextjs-registry --save` (pnpm), or `bun add @ant-design/nextjs-registry` (bun).
AntdRegistry setup in Next.js App Router
In `app/layout.tsx`, wrap your application with the `AntdRegistry` component from `@ant-design/nextjs-registry` to ensure antd styles are properly extracted and injected into the HTML on the first screen. Example: `import React from 'react'; import { AntdRegistry } from '@ant-design/nextjs-registry'; const RootLayout = ({ children }: React.PropsWithChildren) => (<html lang="en"><body><AntdRegistry>{children}</AntdRegistry></body></html>); export default RootLayout;`
Importing antd sub-components in Next.js App Router
Next.js App Router does not support direct dot notation imports of antd sub-components like `<Select.Option />` or `<Typography.Text />`. Instead, import these sub-components directly from their paths to avoid errors.
Using Pages Router with antd in Next.js
When using Next.js Pages Router with antd components, install `@ant-design/cssinjs@2.x` to enable server-side rendering of styles and prevent page flashing. Use the commands: `npm install @ant-design/cssinjs --save` (npm), `yarn add @ant-design/cssinjs` (yarn), `pnpm install @ant-design/cssinjs --save` (pnpm), or `bun add @ant-design/cssinjs` (bun).
Matching @ant-design/cssinjs version with antd dependency
When installing `@ant-design/cssinjs`, ensure the version number matches the version already present in antd's local `node_modules`. Mismatched versions can result in multiple React instances, causing ctx to not be read correctly. You can verify the locally installed version using the command `npm ls @ant-design/cssinjs`.
Refine Create component and useForm hook example
Example showing Refine's Create component with Ant Design Form usage: import { Create, useForm } from '@refinedev/antd'; import { Form, Input } from 'antd'; export const CategoryCreate = () => { const { formProps, saveButtonProps } = useForm(); return ( <Create saveButtonProps={saveButtonProps}> <Form {...formProps} layout="vertical"> <Form.Item label={'Title'} name={['title']} rules={[{ required: true }]}> <Input /> </Form.Item> </Form> </Create> ); };
Bootstrap Refine project with Ant Design using create refine-app
To create a new Refine project with Ant Design, use the create refine-app CLI with the refine-antd preset. Run: npm create refine-app@latest -- --preset refine-antd or yarn create refine-app@latest -- --preset refine-antd or pnpm create refine-app@latest -- --preset refine-antd. The refine-antd preset eliminates the need for extra dependencies and includes example pages built with Ant Design.
Refine integrates with Ant Design through a dedicated package
Refine supports Ant Design through an integration package that contains ready-to-use components and hooks, connecting Refine with Ant Design.
Refine is a React meta-framework for CRUD applications
Refine is a React meta-framework designed for CRUD-intensive web applications. Its core hooks and components simplify development by providing authentication, access control, routing, networking, state management, and internationalization solutions.
Create Refine project with Ant Design using CLI preset
Use the command 'npm create refine-app@latest -- --preset refine-antd' to quickly create a new Refine project with Ant Design using Vite and the refine-antd preset. The yarn equivalent is 'yarn create refine-app@latest -- --preset refine-antd' and the pnpm equivalent is 'pnpm create refine-app@latest -- --preset refine-antd'.
refine-antd preset eliminates need for additional dependencies
The refine-antd preset removes the need for additional dependencies and adds example pages built with Ant Design for quick starting.
Refine integration does not replace Ant Design package
Refine's integration package is not a replacement for the Ant Design package. You can use all Ant Design features the same way as in a regular React application. Refine integration only provides components and hooks for easier use of Ant Design components when combined with Refine's functionality.
Add Ant Design to existing Refine projects
To add Ant Design to an existing Refine project, follow the official Refine Ant Design guide at https://refine.dev/docs/ui-integrations/ant-design/introduction/. Alternatively, use 'npm create refine-app@latest' and select Ant Design as the UI framework from the CLI.
Ant Design configuration is automatic in Refine projects
After initializing a Refine project, all Ant Design configuration is completed automatically, allowing you to immediately start using Ant Design components in the Refine application.