# ant-design | Ant Design Team | Knowledge Base | Instagit

An enterprise-class UI design language and React UI library

GitHub Stars: 97.6k

Repository: https://github.com/ant-design/ant-design

---

## Articles

### [Foundational Concepts for Creating Custom Components on Top of Ant Design Primitives](/ant-design/ant-design/foundational-concepts-creating-custom-components-ant-design-primitives)

Discover foundational concepts for custom Ant Design components. Learn how its token-driven architecture and CSS-in-JS enable style inheritance and semantic capabilities.

- Tags: deep-dive
- Published: 2026-02-27

### [How to Build Responsive Layouts Using Ant Design's Grid System](/ant-design/ant-design/build-responsive-layouts-ant-design-grid-system)

Build responsive layouts with Ant Design's Grid system. Use Row and Col components with flexible props to create fluid 12-column designs adapting to all screen sizes.

- Tags: how-to-guide
- Published: 2026-02-27

### [Performance Optimization Techniques in Ant Design: Memoization and Code Splitting](/ant-design/ant-design/techniques-performance-optimization-memoization-code-splitting-ant-design)

Boost Ant Design performance with memoization using React.memo and useMemo. Implement code splitting with React.lazy and Suspense to reduce bundle size. Optimize your antd app today.

- Tags: performance
- Published: 2026-02-27

### [How to Write Unit and Integration Tests for Ant Design Components with Jest](/ant-design/ant-design/approach-writing-tests-ant-design-components-jest)

Learn to write unit and integration tests for Ant Design components using Jest and @testing-library/react. Discover shared testing utilities like mountTest and rtlTest for consistent coverage.

- Tags: testing
- Published: 2026-02-27

### [Ant Design Accessibility: Best Practices for WCAG 2.1 AA Compliance](/ant-design/ant-design/key-considerations-best-practices-accessibility-a11y-ant-design)

Ensure WCAG 2.1 AA compliance with Ant Design accessibility best practices. Learn how Ant Design components support a11y through ARIA, keyboard navigation, and automated testing.

- Tags: best-practices
- Published: 2026-02-27

### [How to Integrate Custom Icons into an Ant Design Project: SVG and Iconfont Methods](/ant-design/ant-design/integrate-custom-icons-ant-design-project)

Learn to integrate custom icons into your Ant Design project using SVG components or Iconfont scripts. Master icon customization for a unique UI.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Customize DatePicker and TimePicker in Ant Design: Formats, Ranges, and Advanced Options](/ant-design/ant-design/customize-datepicker-timepicker-formats-ranges-ant-design)

Customize Ant Design DatePicker and TimePicker with formats, ranges, and advanced options. Learn how to use the format prop for flexible input validation and control.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Handle File Uploads and Integrate Them with Ant Design’s Upload Component](/ant-design/ant-design/handle-file-uploads-integrate-upload-component-ant-design)

Learn to handle file uploads with Ant Design's Upload component. Explore `beforeUpload`, `customRequest`, and various display modes for React apps.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Build Cascaded Dropdowns with Ant Design's Cascader Component](/ant-design/ant-design/recommended-way-build-cascaded-dropdowns-cascader-component)

Learn to build cascaded dropdowns with Ant Design's Cascader component. Configure search filtering or multiple checkbox selections for your interactive forms.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Customize Ant Design Component Styles Using `classNames` and `styles` Props](/ant-design/ant-design/customize-component-styles-classnames-styles-props-ant-design)

Learn to customize Ant Design v5+ component styles with classNames and styles props. Override semantic slots using CSS classes or inline styles with the useMergeSemantic hook.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use TypeScript Generics with Ant Design Select and Table Components](/ant-design/ant-design/use-typescript-generics-select-table-ant-design)

Master TypeScript generics with Ant Design Select and Table components for type safety and full IntelliSense. Eliminate any types and enhance your callbacks and render functions.

- Tags: how-to-guide
- Published: 2026-02-27

### [Migrating from Ant Design v5 to v6: The Official Guide](/ant-design/ant-design/official-guide-migrating-ant-design-v5-v6)

Find the official guide for migrating Ant Design v5 to v6. Learn about React 18+ requirements, package upgrades, and over 150 breaking API changes in this comprehensive resource.

- Tags: migration-guide
- Published: 2026-02-27

### [How to Implement Server-Side Rendering (SSR) with Ant Design for Better Performance](/ant-design/ant-design/implement-server-side-rendering-ssr-ant-design)

Learn how to implement Server-Side Rendering with Ant Design using @ant-design/cssinjs. Eliminate unstyled content and boost performance with efficient critical CSS extraction for faster page loads.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Optimize Ant Design Bundle Size and Leverage Tree Shaking: A Complete Guide](/ant-design/ant-design/strategies-optimizing-ant-design-bundle-size-tree-shaking)

Optimize your Ant Design bundle size with tree shaking. Learn to use named imports, disable hashing, and leverage ValidateMessageContext to reduce bloat.

- Tags: how-to-guide
- Published: 2026-02-27

### [How Ant Design's CSS-in-JS useStyle Hook Works: A Deep Dive](/ant-design/ant-design/how-ant-design-css-in-js-works-use-style-hook)

Explore Ant Design's CSS-in-JS useStyle hook. Learn how it registers dynamic component styles, providing wrappers, hash IDs, and CSS variables for scoped theming.

- Tags: deep-dive
- Published: 2026-02-27

### [How to Add Custom Locales for Internationalization (i18n) in Ant Design](/ant-design/ant-design/add-custom-locales-internationalization-ant-design)

Learn to add custom locales for internationalization i18n in Ant Design. Create a JavaScript object and pass it to ConfigProvider to override default English strings.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Handle Table Pagination, Sorting, and Filtering Effectively in Ant Design](/ant-design/ant-design/handle-table-pagination-sorting-filtering-ant-design)

Master Ant Design table pagination, sorting, and filtering with specialized React hooks. Control state effortlessly and enhance your UI with built-in elements for a seamless user experience.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Set Up Form Validation and Manage Form Instances in Ant Design](/ant-design/ant-design/setup-form-validation-manage-form-instances-ant-design)

Learn to set up form validation and manage form instances in Ant Design using Form.useForm() and Form.Item rules. Improve your React form handling today.

- Tags: how-to-guide
- Published: 2026-02-27

### [Global Configuration Best Practices with Ant Design ConfigProvider](/ant-design/ant-design/best-practice-global-configuration-configprovider-ant-design)

Master Ant Design global configuration with ConfigProvider. Learn best practices for themes locale and component settings to create a unified application.

- Tags: best-practices
- Published: 2026-02-26

### [How to Implement Dark Mode in Ant Design: A Complete Guide Using Design Tokens](/ant-design/ant-design/how-to-implement-dark-mode-in-ant-design-application)

Effortlessly implement dark mode in Ant Design with this complete guide. Learn to leverage design tokens and ConfigProvider for a seamless UI switch.

- Tags: how-to-guide
- Published: 2026-02-26

### [How to Customize Ant Design Theme Using Design Tokens: A Complete Guide](/ant-design/ant-design/how-to-customize-ant-design-theme-using-design-tokens)

Effortlessly customize your Ant Design theme using design tokens. Learn how to leverage the ConfigProvider and override token values to create a unique look for your React applications.

- Tags: how-to-guide
- Published: 2026-02-26