Third-Party Libraries

antd is built to implement a set of high-quality React UI components which follow Ant Design specification. It is impossible to include all useful components in one package, so we also recommend that using other great third-party libraries in React community.

Category	Recommended Components
Visualization and charts	Ant Design Charts AntV Data Visualization reactflow
React Hooks Library	ahooks
React Form Library	ProForm Formily react-hook-form formik
Router	react-router
Layout	react-grid-layout react-grid-system rc-dock
Drag and drop	dnd-kit react-beautiful-dnd react-dnd
Code Editor	react-codemirror2 react-monaco-editor
Rich Text Editor	react-quill
JSON Viewer	react-json-view
Color Picker	react-colorful react-color
Media Query	react-responsive
Copy to clipboard	react-copy-to-clipboard
Document head manager	react-helmet-async
Icons	react-fontawesome react-icons
QR Code	qrcode.react
Top Progress Bar	react-nprogress
i18n	FormatJS react-i18next
Code highlight	react-syntax-highlighter
Markdown renderer	react-markdown
Infinite Scroll	@rc-component/virtual-list react-infinite-scroll-component
Map	google-map-react @uiw/react-amap
Video	react-player video-react video.js
Context Menu	react-contexify
Emoji	emoji-picker-react emoji-mart
Split View	react-split-pane react-resizable-panels
Image Crop	antd-img-crop react-image-crop
Keywords highlight	react-highlight-words
Text Loop	react-text-loop-next react-fast-marquee
Animation	motion Ant Motion react-spring
Page Footer	rc-footer
Number/Currency	react-countup react-number-format react-currency-input-field
Application Frameworks	umi remix refine
Flow-based UI	pro-flow react-flow x6
Phone Input	react-phone-number-input antd-phone-input
AI Chat	Ant Design X
CLI Tool	Ant Design CLI
PDF	react-pdf @react-pdf/renderer
React Gesture	use-gesture

Products we are using ✨

There are some products to recommend for developer/designer/product manager.

Category	Recommended Products
Documentation	🐦 Yuque
Icon	Iconfont
Sketch plugin	Kitchen
Online Playground	codesandbox codepen
Image Compressor	tinypng

<style> .markdown table td:first-child { width: 20%; font-weight: 500; } .markdown table td > a:not(:last-child) { margin-inline-end: 18px; } .markdown table td > a:not(:last-child)::after { position: absolute; margin: 0 6px 0 8px; color: #bbb; content: '|'; pointer-events: none; } </style>