# ant-design/ant-design

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ant-design-ant-design).**

98,362 stars · 54,617 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/ant-design/ant-design
- Homepage: https://ant.design
- awesome-repositories: https://awesome-repositories.com/repository/ant-design-ant-design.md

## Topics

`ant-design` `antd` `design-systems` `react` `typescript` `ui-kit` `ui-library`

## Description

Ant Design is an enterprise-grade component library and design system framework built for developing complex, data-heavy web applications. It provides a comprehensive collection of pre-built, state-driven interface elements that map data properties to rendered components, ensuring consistent interaction patterns and visual language across large-scale projects.

The library distinguishes itself through a robust styling architecture that utilizes design tokens and hierarchical configuration providers to propagate global settings like themes, locale, and layout direction. By employing component-level semantic mapping and runtime style injection, it decouples visual structure from logic, allowing for granular theme overrides and style isolation while maintaining a unified aesthetic.

The project covers a broad capability surface, including advanced navigation utilities, data entry tools, feedback mechanisms, and structured content containers. These components are designed to handle intricate user interactions, such as hierarchical data selection, real-time suggestions, and programmatic focus management, while supporting flexible layout systems and portal-based overlay rendering for transient elements.

## Tags

### User Interface & Experience

- [Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries.md) — Delivers a robust collection of reusable interface elements tailored for building complex, data-intensive web applications. ([source](https://ant.design/docs/react/getting-started.md))
- [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Supports diverse interactive actions with configurable button variants, loading indicators, and flexible icon placement. ([source](https://ant.design/components/button.md))
- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Manages visual consistency through a hierarchical system of seed, map, and alias values that define core design intent. ([source](https://ant.design/docs/react/customize-theme))
- [Theme Configuration APIs](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/theme-configuration-apis.md) — Enables programmatic theme control through dynamic algorithm switching and granular overrides for zero-runtime style generation. ([source](https://ant.design/docs/react/customize-theme))
- [List Components](https://awesome-repositories.com/f/user-interface-experience/data-display-components/list-components.md) — Handles large collections with built-in support for data binding, custom item rendering, pagination, and grid-based layouts. ([source](https://ant.design/components/list.md))
- [CSS Variable Token Mappings](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens/css-variable-token-mappings.md) — Synchronizes design tokens with CSS variables to facilitate rapid theme switching without needing to re-serialize stylesheets. ([source](https://ant.design/docs/blog/css-var-plan.md))
- [CSS Variable Overrides](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/css-variable-overrides.md) — Allows direct theme customization by mapping design tokens to CSS variables, effectively bypassing complex specificity constraints. ([source](https://ant.design/docs/blog/css-tricks.md))
- [Dynamic Theme Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/dynamic-theme-engines.md) — Injects styles at runtime using unique hash values to ensure proper component isolation and support for dynamic updates. ([source](https://ant.design/docs/blog/css-var-plan.md))
- [Product Color Systems](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-system-specifications/product-color-systems.md) — Organizes brand, functional, and neutral color palettes into a structured framework to maintain a cohesive visual identity. ([source](https://ant.design/docs/spec/colors.md))
- [Virtualized Lists](https://awesome-repositories.com/f/user-interface-experience/virtualized-lists.md) — Maximizes efficiency by rendering only the visible subset of items when displaying large datasets. ([source](https://ant.design/components/list.md))
- [Style Isolation Mechanisms](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms.md) — Scopes component styles to prevent leakage between nested elements and themes, ensuring predictable visual rendering. ([source](https://ant.design/docs/blog/css-tricks.md))
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Provides responsive layout utilities for defining precise column configurations and gutter spacing within complex interface designs. ([source](https://ant.design/components/list.md))
- [Button Design Systems](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/component-implementation-patterns/button-design-systems.md) — Establishes standardized visual types, emphasis levels, and placement rules to ensure uniform button behavior across interfaces. ([source](https://ant.design/docs/spec/buttons.md))
- [CSS Logical Properties](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/css-logical-properties.md) — Implements layout-agnostic CSS properties to facilitate seamless transitions between left-to-right and right-to-left interface directions. ([source](https://ant.design/docs/react/compatible-style.md))
- [Color Palette Management](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palette-management.md) — Generates comprehensive color palettes and theme variables programmatically to maintain visual harmony throughout the design system. ([source](https://ant.design/docs/spec/colors.md))
- [Form Alignment Specifications](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/ui-specifications/form-alignment-specifications.md) — Standardizes label and input alignment to ensure visual consistency across complex data entry interfaces. ([source](https://ant.design/docs/spec/alignment.md))
- [Semantic Styling Hooks](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/runtime-utilities/infrastructure-utility-systems/component-customization-hooks/semantic-styling-hooks.md) — Allows granular customization of internal elements like input fields and dropdowns through dedicated semantic class-name hooks. ([source](https://ant.design/llms-semantic.md))
- [Accordion Panels](https://awesome-repositories.com/f/user-interface-experience/data-display-components/accordion-panels.md) — Toggles content visibility through collapsible panels that support accordion modes and custom trigger icons. ([source](https://ant.design/components/collapse.md))
- [Space Layout Hooks](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/space-layout-hooks.md) — Offers semantic hooks for root, item, and separator elements to simplify the configuration of layout spacing and alignment. ([source](https://ant.design/llms-semantic.md))
- [Static Theme Switchers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/static-theme-switchers.md) — Toggles parent-level CSS classes to update theme variables instantly without requiring expensive runtime JavaScript calculations. ([source](https://ant.design/docs/blog/css-var-plan.md))
- [Data Grid Styling Hooks](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/ui-component-styling-hooks/data-grid-styling-hooks.md) — Grants granular control over table elements through semantic class hooks for headers, rows, cells, and pagination controls. ([source](https://ant.design/llms-semantic.md))
- [Static Style Extraction](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/static-style-extraction.md) — Pre-renders component styles into static CSS files during server-side execution to boost initial page load performance. ([source](https://ant.design/docs/react/server-side-rendering.md))
- [Loading Placeholders](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators/loading-placeholders.md) — Provides skeleton loading components with semantic hooks for headers, avatars, and text blocks to improve perceived performance. ([source](https://ant.design/llms-semantic.md))
- [Notification Systems](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/notification-systems.md) — Displays automated status updates using a notification component that provides semantic class names for easy styling of list items. ([source](https://ant.design/llms-semantic.md))
- [Notification Stacking Systems](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/notification-systems/notification-stacking-systems.md) — Groups concurrent alerts into an ordered stack with configurable display behaviors to keep user notifications organized. ([source](https://ant.design/docs/blog/notification-stack.md))
- [Drag and Drop Utilities](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/drag-and-drop-utilities.md) — Exposes hooks for reordering list items, including support for custom drag handles to improve interface interactivity. ([source](https://ant.design/components/list.md))

### Graphics & Multimedia

- [Style Caching Strategies](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/ui-component-lifecycle-engines/style-caching-strategies.md) — Optimizes rendering performance by pre-calculating and caching style hashes based on component names and design tokens. ([source](https://ant.design/docs/blog/hydrate-cssinjs.md))

### Software Engineering & Architecture

- [Server-Side Rendering Style Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/server-side-rendering-style-registries.md) — Collects and embeds component styles directly into HTML during server-side rendering to guarantee seamless client-side hydration. ([source](https://ant.design/docs/react/use-with-next.md))
- [Internationalization Providers](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/configuration-sourcing-and-binding/configuration-providers/internationalization-providers.md) — Injects locale-specific formatting and text content into the application tree via a centralized global provider. ([source](https://ant.design/docs/react/i18n.md))
- [Next.js Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/next-js-integrations.md) — Integrates style extraction and caching utilities to ensure compatibility with server-side rendering environments. ([source](https://ant.design/docs/react/use-with-next.md))
- [Tree Shaking Support](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/build-bundle-optimization/tree-shaking-support.md) — Facilitates modular imports so developers can include only the necessary component code to reduce final bundle sizes. ([source](https://ant.design/docs/react/getting-started.md))
- [Style Injection Hooks](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/style-injection-hooks.md) — Coordinates style injection timing and reference counting to maintain stability during component lifecycle transitions. ([source](https://ant.design/docs/blog/suspense.md))
- [Dependency Decomposition](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/build-bundle-optimization/dependency-decomposition.md) — Decouples global configuration providers from specific validation dependencies to keep production bundles lean and efficient. ([source](https://ant.design/docs/blog/tree-shaking.md))

### Web Development

- [CSS-in-JS Hydration Mechanisms](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/css-in-js-hydration-mechanisms.md) — Prevents redundant style processing during client-side hydration by utilizing efficient hash-based caching mechanisms. ([source](https://ant.design/docs/blog/hydrate-cssinjs.md))
- [Style Extraction Utilities](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/style-extraction-utilities.md) — Captures component styles during server-side rendering to inject them directly into the document head, preventing layout shifts. ([source](https://ant.design/docs/react/server-side-rendering.md))
- [Hybrid Style Extraction Strategies](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/hybrid-style-extraction-strategies.md) — Combines dynamic style flexibility with static file caching by generating hashed CSS files on demand during the rendering process. ([source](https://ant.design/docs/blog/extract-ssr.md))
- [Typography Semantic Hooks](https://awesome-repositories.com/f/web-development/web-standards/typography-systems/typography-semantic-hooks.md) — Maps semantic design tokens to typography components to ensure consistent text rendering across action buttons and input areas. ([source](https://ant.design/llms-semantic.md))

### Part of an Awesome List

- [Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/component-libraries.md) — Enterprise-class UI design language and component library.
- [Frontend and UI Development](https://awesome-repositories.com/f/awesome-lists/devtools/frontend-and-ui-development.md) — Enterprise-grade UI design language and React component library.
- [UI Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/ui-frameworks.md) — Enterprise-grade UI design language and component suite.

### Artificial Intelligence & ML

- [Context Optimization Strategies](https://awesome-repositories.com/f/artificial-intelligence-ml/machine-learning/infrastructure/model-optimization-and-inference/performance-optimizations/context-optimization-strategies.md) — Minimizes unnecessary re-renders by memoizing context values and splitting large data objects within the provider hierarchy. ([source](https://ant.design/docs/blog/render-times.md))