antd vs @mantine/core vs @mui/material vs @nextui-org/react vs react-bootstrap vs semantic-ui-react
Selecting a React UI Component Library for Enterprise and Modern Web Apps
Search packages..
antd@mantine/core@mui/material@nextui-org/reactreact-bootstrapsemantic-ui-reactSimilar Packages:

Selecting a React UI Component Library for Enterprise and Modern Web Apps

This comparison evaluates six prominent React UI component libraries: @mantine/core, @mui/material, @nextui-org/react, antd, react-bootstrap, and semantic-ui-react. These tools provide pre-built components like buttons, inputs, and modals to accelerate development. They differ significantly in styling approaches (CSS-in-JS, Tailwind, or traditional CSS), customization capabilities, accessibility standards, and target use cases ranging from modern startups to enterprise dashboards.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
antd2,854,86197,63848.6 MB1,3767 days agoMIT
@mantine/core030,72012 MB5615 days agoMIT
@mui/material097,9655.68 MB1,72519 days agoMIT
@nextui-org/react028,29138.7 kB299a year agoMIT
react-bootstrap022,6461.48 MB20710 months agoMIT
semantic-ui-react013,2562.9 MB2392 years agoMIT

React UI Libraries: Architecture, Theming, and DX Compared

Choosing a UI library is one of the most impactful architectural decisions in a React project. The six libraries discussed here β€” @mantine/core, @mui/material, @nextui-org/react, antd, react-bootstrap, and semantic-ui-react β€” solve the same problem but with vastly different philosophies. Some prioritize enterprise density, others focus on developer experience, and a few rely on specific CSS frameworks. Let's break down how they handle the core challenges of building interfaces.

🎨 Styling and Theming: CSS-in-JS vs. Tailwind vs. Classic CSS

How a library handles styles dictates how you customize it. This affects bundle size, runtime performance, and how easy it is to match your brand.

@mantine/core uses a custom CSS-in-JS solution (v7+) based on CSS variables and style props. It allows dynamic styling without a heavy runtime.

// mantine: Style props and CSS variables
import { Button } from '@mantine/core';

function MyButton() {
  return (
    <Button 
      variant="filled" 
      color="blue" 
      styles={{ root: { borderRadius: '20px' } }}
    >
      Click Me
    </Button>
  );
}

@mui/material relies on Emotion (or styled-components) for its CSS-in-JS engine. It offers a powerful theme provider but adds runtime overhead.

// mui: Styled components and theme
import { Button, createTheme, ThemeProvider } from '@mui/material';

const theme = createTheme({ palette: { primary: { main: '#1976d2' } } });

function MyButton() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" sx={{ borderRadius: 5 }}>
        Click Me
      </Button>
    </ThemeProvider>
  );
}

@nextui-org/react is built on top of Tailwind CSS. It uses a variant system that compiles to Tailwind classes, offering zero runtime style overhead.

// nextui: Tailwind-based variants
import { Button } from "@nextui-org/react";

function MyButton() {
  return (
    <Button 
      color="primary" 
      radius="full" 
      className="custom-class"
    >
      Click Me
    </Button>
  );
}

antd uses Less CSS variables (v5+) for theming. It requires a config provider to inject design tokens dynamically.

// antd: ConfigProvider for theming
import { Button, ConfigProvider } from 'antd';

function MyButton() {
  return (
    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
      <Button type="primary" shape="round">
        Click Me
      </Button>
    </ConfigProvider>
  );
}

react-bootstrap depends on the standard Bootstrap CSS file. Customization happens via Sass variables or overriding CSS classes.

// react-bootstrap: Class-based styling
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function MyButton() {
  return (
    <Button variant="primary" className="rounded-pill">
      Click Me
    </Button>
  );
}

semantic-ui-react relies on the Semantic UI CSS stylesheet. Customization requires overriding specific CSS selectors globally.

// semantic-ui-react: Global CSS overrides
import { Button } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

function MyButton() {
  return (
    <Button primary className="custom-rounded">
      Click Me
    </Button>
  );
}

🧩 Component API: Prop Patterns and Composition

The way you interact with components determines how fast you can build. Some libraries use compound components, while others use configuration props.

@mantine/core favors a flat prop API with extensive options for behavior and styling in one place.

// mantine: Feature-rich props
import { Modal, Button } from '@mantine/core';

function MyModal() {
  return (
    <Modal opened={true} onClose={() => {}} title="Welcome">
      <p>Content here</p>
      <Button onClick={() => {}}>Close</Button>
    </Modal>
  );
}

@mui/material often uses compound components for complex structures like lists or tables, allowing granular control.

// mui: Compound components
import { Modal, Box, Button } from '@mui/material';

function MyModal() {
  return (
    <Modal open={true}>
      <Box sx={{ p: 4 }}>
        <h2>Welcome</h2>
        <Button onClick={() => {}}>Close</Button>
      </Box>
    </Modal>
  );
}

@nextui-org/react keeps APIs simple and clean, focusing on common use cases with sensible defaults.

// nextui: Simple declarative API
import { Modal, ModalContent, ModalHeader, ModalBody, Button } from "@nextui-org/react";

function MyModal() {
  return (
    <Modal isOpen={true}>
      <ModalContent>
        <ModalHeader>Welcome</ModalHeader>
        <ModalBody><p>Content here</p></ModalBody>
        <Button onPress={() => {}}>Close</Button>
      </ModalContent>
    </Modal>
  );
}

antd provides highly configurable components, often packing many features into single props (like pagination in tables).

// antd: High-density configuration
import { Modal, Button } from 'antd';

function MyModal() {
  return (
    <Modal title="Welcome" open={true} onOk={() => {}} onCancel={() => {}}>
      <p>Content here</p>
      <Button onClick={() => {}}>Close</Button>
    </Modal>
  );
}

react-bootstrap mirrors Bootstrap's HTML structure, using props to toggle classes and behaviors.

// react-bootstrap: Bootstrap-mirrored props
import { Modal, Button } from 'react-bootstrap';

function MyModal() {
  return (
    <Modal show={true} onHide={() => {}}>
      <Modal.Header closeButton><Modal.Title>Welcome</Modal.Title></Modal.Header>
      <Modal.Body><p>Content here</p></Modal.Body>
      <Button onClick={() => {}}>Close</Button>
    </Modal>
  );
}

semantic-ui-react uses a shorthand prop system where content can often be passed as strings.

// semantic-ui-react: Shorthand props
import { Modal, Button } from 'semantic-ui-react';

function MyModal() {
  return (
    <Modal open={true} onClose={() => {}}>
      <Modal.Header>Welcome</Modal.Header>
      <Modal.Content><p>Content here</p></Modal.Content>
      <Button onClick={() => {}}>Close</Button>
    </Modal>
  );
}

β™Ώ Accessibility and Standards

Accessibility (a11y) is non-negotiable for public-facing apps. Libraries handle ARIA attributes and keyboard navigation differently.

@mantine/core has strong a11y focus out of the box, with hooks to manage focus traps and screen reader announcements.

// mantine: Built-in focus management
import { useFocusTrap } from '@mantine/hooks';

function AccessibleModal() {
  const ref = useFocusTrap();
  return <div ref={ref}>Trap focus inside</div>;
}

@mui/material adheres strictly to WAI-ARIA standards. Components are tested for compliance, but customization can break it if not careful.

// mui: ARIA props support
import { Button } from '@mui/material';

function AccessibleButton() {
  return <Button aria-label="close dialog" onClick={() => {}}>X</Button>;
}

@nextui-org/react ensures basic accessibility but relies on the developer to maintain it when using Tailwind utilities heavily.

// nextui: Standard ARIA support
import { Button } from "@nextui-org/react";

function AccessibleButton() {
  return <Button aria-label="submit form">Submit</Button>;
}

antd includes a11y features but historically focused more on enterprise functionality than strict WCAG compliance.

// antd: Basic ARIA support
import { Button } from 'antd';

function AccessibleButton() {
  return <Button aria-label="save">Save</Button>;
}

react-bootstrap inherits accessibility from Bootstrap CSS, which is generally good but requires manual verification on complex components.

// react-bootstrap: Standard HTML attributes
import { Button } from 'react-bootstrap';

function AccessibleButton() {
  return <Button aria-label="delete">Delete</Button>;
}

semantic-ui-react has inconsistent accessibility support across components, often requiring manual ARIA additions.

// semantic-ui-react: Manual ARIA needed
import { Button } from 'semantic-ui-react';

function AccessibleButton() {
  return <Button aria-label="action">Action</Button>;
}

πŸ› οΈ Ecosystem and Maintenance Status

Long-term viability matters. You need to know if the library will be supported in two years.

@mantine/core is actively maintained with frequent updates, a dedicated hooks library, and strong community growth.

// mantine: Rich hooks ecosystem
import { useLocalStorage } from '@mantine/hooks';

function MyComponent() {
  const [value, setValue] = useLocalStorage({ key: 'theme', defaultValue: 'light' });
  return <div>{value}</div>;
}

@mui/material has the largest ecosystem, including data grids, pickers, and templates, backed by a commercial entity.

// mui: Extended ecosystem (e.g., DatePicker)
import { DatePicker } from '@mui/x-date-pickers';

function MyPicker() {
  return <DatePicker label="Select Date" />;
}

@nextui-org/react is rapidly evolving, closely tied to the Vercel/Next.js ecosystem, with frequent visual updates.

// nextui: Integration with Next.js
import { Navbar } from "@nextui-org/react";

function MyNav() {
  return <Navbar>My App</Navbar>;
}

antd is stable and widely used in enterprise, with a massive collection of components but slower innovation cycles.

// antd: Enterprise components (e.g., Table)
import { Table } from 'antd';

function MyTable() {
  return <Table dataSource={[]} columns={[]} />;
}

react-bootstrap is stable but moves slowly, tracking Bootstrap's release cycle. It is reliable but less innovative.

// react-bootstrap: Stable components
import { Nav } from 'react-bootstrap';

function MyNav() {
  return <Nav><Nav.Item>Link</Nav.Item></Nav>;
}

semantic-ui-react is effectively in maintenance mode. The underlying CSS is no longer developed, posing risks for new projects.

// semantic-ui-react: Legacy status warning
// No new feature examples recommended due to deprecation risk
import { Icon } from 'semantic-ui-react';

function MyIcon() {
  return <Icon name="user" />;
}

πŸ“Š Summary: Key Differences

FeatureMantineMUINextUIAntDReact-BootstrapSemantic-UI
StylingCSS VariablesCSS-in-JSTailwind CSSLess/CSS VarsBootstrap CSSSemantic CSS
Bundle SizeModerateHeavyLightHeavyModerateModerate
CustomizationHighVery HighHigh (Tailwind)MediumMediumLow
Enterprise ReadyYesYesNoYesYesNo
MaintenanceActiveActiveActiveActiveStableLegacy

πŸ’‘ The Big Picture

@mantine/core is the balanced choice for modern apps β€” great DX, good looks, and flexible without being heavy.

@mui/material is the enterprise standard β€” choose it when you need every component imaginable and long-term support.

@nextui-org/react is the design-forward choice β€” perfect for consumer apps where visuals matter and you use Tailwind.

antd is the data-heavy choice β€” unbeatable for admin dashboards with complex tables and forms.

react-bootstrap is the safe legacy choice β€” use it if you already know Bootstrap or need to match an existing system.

semantic-ui-react is the legacy trap β€” avoid for new work; the underlying tech is no longer evolving.

Final Thought: Your UI library sets the tone for your codebase. Pick the one that matches your team's skills and your product's long-term goals.

How to Choose: antd vs @mantine/core vs @mui/material vs @nextui-org/react vs react-bootstrap vs semantic-ui-react

  • antd:

    Choose antd if you are building complex enterprise admin panels or data-heavy applications. It provides a comprehensive set of high-level components like tables and forms out of the box, following a strict design language that ensures consistency across large teams.

  • @mantine/core:

    Choose @mantine/core if you want a modern, hooks-first library with excellent TypeScript support and a flexible styling system based on CSS variables. It is ideal for teams that value developer experience, comprehensive documentation, and a balance between customization and convention without heavy dependencies.

  • @mui/material:

    Choose @mui/material if you need the most mature ecosystem with extensive components and enterprise-grade support. It is suitable for large-scale applications where stability, accessibility compliance, and a vast community are critical, though it comes with a larger bundle size and a steeper learning curve for theming.

  • @nextui-org/react:

    Choose @nextui-org/react if you are building a modern, visually striking application using Tailwind CSS. It is perfect for projects that prioritize aesthetics and performance, especially within the Next.js ecosystem, offering beautiful defaults with minimal configuration.

  • react-bootstrap:

    Choose react-bootstrap if you need to integrate with existing Bootstrap projects or prefer utility-first CSS without a build step for styling. It is a safe choice for legacy modernization or teams already invested in the Bootstrap ecosystem, though it lacks the modern DX of newer libraries.

  • semantic-ui-react:

    Avoid semantic-ui-react for new projects as the underlying Semantic UI CSS is no longer actively maintained. Only consider it for maintaining legacy applications where migration is not feasible, and evaluate moving to a supported alternative like Mantine or MUI for long-term stability.

Similar Npm Packages to antd

antd (Ant Design) is a popular design system and UI component library for React applications. It provides a comprehensive set of high-quality components and design guidelines that help developers create user interfaces with a consistent look and feel. Ant Design is particularly favored in enterprise applications due to its robust components and customizable themes. While antd offers a powerful solution for building user interfaces, there are several alternatives in the React ecosystem that also provide UI components and design systems. Here are a few notable alternatives:

  • bootstrap is one of the most widely used front-end frameworks for developing responsive and mobile-first websites. It provides a collection of CSS and JavaScript components that are easy to use and customize. While Bootstrap is not React-specific, it can be integrated into React applications using libraries like react-bootstrap. If you are looking for a well-established framework with a large community and extensive documentation, Bootstrap is a solid choice.

  • material-ui (now known as MUI) is a popular React component library that implements Google's Material Design principles. It offers a wide range of customizable components that follow Material Design guidelines, making it easy to create visually appealing applications. MUI is particularly suitable for projects that aim for a modern and clean aesthetic. If you prefer a design system that emphasizes usability and accessibility, MUI is an excellent alternative to antd.

  • semantic-ui-react is the official React integration for Semantic UI, a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI React provides a set of components that are easy to use and integrate into React applications. It focuses on creating a user-friendly experience with a clean and minimalistic design. If you value semantic HTML and a straightforward API, semantic-ui-react is a great option to consider.

To see how antd compares with bootstrap, material-ui, and semantic-ui-react, check out the comparison: Comparing antd vs bootstrap vs material-ui vs semantic-ui-react.

Similar Npm Packages to @mantine/core

@mantine/core is a comprehensive component library for React applications that provides a rich set of customizable UI components and hooks. It is designed to help developers build modern web applications quickly and efficiently, with a focus on usability and accessibility. Mantine offers a wide range of components, including buttons, modals, notifications, and more, all of which can be easily styled and customized to fit the needs of your project. Its extensive documentation and well-structured API make it a great choice for both beginners and experienced developers looking to streamline their UI development process.

There are several alternatives to Mantine that also provide robust UI component libraries for React applications:

  • @chakra-ui/react is a modular and accessible component library that allows developers to create responsive and visually appealing user interfaces. Chakra UI emphasizes simplicity and ease of use, providing a set of components that are easy to customize and extend. With built-in support for dark mode, theming, and accessibility, Chakra UI is an excellent choice for developers looking to create modern applications with a focus on user experience.
  • antd (Ant Design) is a popular UI component library that provides a comprehensive set of high-quality components designed for enterprise-level applications. Ant Design is known for its robust design system and extensive set of components, which cover a wide range of use cases. It is particularly well-suited for building complex applications that require a consistent design language and a rich set of features. Ant Design also offers a powerful theming system, making it easy to customize the look and feel of your application.

To explore how @mantine/core compares with @chakra-ui/react and antd, check out the comparison: Comparing @chakra-ui/react vs @mantine/core vs antd.

Similar Npm Packages to @mui/material

@mui/material is a popular React component library that implements Google's Material Design guidelines. It provides a robust set of pre-designed components that help developers build responsive and visually appealing user interfaces quickly. With a focus on usability and accessibility, MUI allows for easy customization and theming, making it a favorite among developers for creating modern web applications. However, there are several alternatives in the React ecosystem that also offer component libraries and design systems. Here are a few notable ones:

  • @blueprintjs/core is a React-based UI toolkit developed by Palantir. It is particularly well-suited for building complex, data-dense interfaces, such as dashboards and admin panels. Blueprint provides a comprehensive set of components, including tables, forms, and menus, all designed with a focus on usability and performance. If your application requires a robust set of components for enterprise-level applications, Blueprint is a strong choice.

  • @chakra-ui/react is a modular and accessible component library that provides a simple and flexible way to build React applications. Chakra UI emphasizes developer experience and accessibility, offering a set of customizable components that can be easily styled using a theme. Its focus on simplicity and composability makes it an excellent choice for developers looking to create responsive and accessible UIs without a steep learning curve.

  • grommet is a React-based framework that provides a rich set of components and design patterns for building responsive and accessible web applications. Grommet is known for its flexibility and customizability, allowing developers to create unique designs while adhering to best practices in accessibility and usability. If you are looking for a library that emphasizes design consistency and responsiveness, Grommet is worth considering.

  • react-bootstrap is a popular library that brings the Bootstrap framework to React. It provides a set of pre-built components that follow the Bootstrap design principles, making it easy to create responsive layouts and components. If you are already familiar with Bootstrap and want to leverage its design system within a React application, React Bootstrap is a great option.

  • rebass is a minimalist component library that focuses on providing a set of responsive and themeable components for building user interfaces. It is built on top of styled-components and allows for easy customization through props. If you prefer a lightweight library that emphasizes design flexibility and simplicity, Rebass is an excellent choice.

  • semantic-ui-react is the official React integration for Semantic UI, a popular CSS framework. It provides a set of components that adhere to Semantic UI's design principles, enabling developers to create responsive and visually appealing applications. If you are looking for a library that combines the power of Semantic UI with React, this is a solid option.

  • styled-components is a popular library for styling React components using tagged template literals. It allows developers to write CSS directly within their JavaScript files, promoting a component-based styling approach. While it is not a component library in the traditional sense, it can be used alongside other libraries to create custom-styled components.

  • tailwindcss is a utility-first CSS framework that provides a set of low-level utility classes for building custom designs. It encourages a different approach to styling by allowing developers to compose styles directly in their markup. If you prefer a highly customizable and utility-based approach to styling, Tailwind CSS is an excellent choice.

To explore how @mui/material compares with these alternatives, check out the comparison link: Comparing @blueprintjs/core vs @chakra-ui/react vs @mui/material vs grommet vs react-bootstrap vs rebass vs semantic-ui-react vs styled-components vs tailwindcss.

Similar Npm Packages to @nextui-org/react

@nextui-org/react is a modern UI library for React applications that provides a set of customizable components designed to create beautiful and responsive user interfaces. It focuses on simplicity and ease of use, allowing developers to quickly build applications with a clean and modern aesthetic. With a focus on accessibility and performance, NextUI is an excellent choice for developers looking to enhance their React projects with a polished UI.

While NextUI offers a robust set of components, there are several alternatives in the React ecosystem that also provide UI component libraries. Here are a few notable options:

  • @mantine/core is a comprehensive React component library that emphasizes usability and customization. Mantine provides a wide range of components, hooks, and utilities, making it suitable for building complex applications. Its design system is flexible, allowing developers to create unique styles while maintaining a consistent look and feel across their applications. If you're looking for a highly customizable library with a rich set of features, Mantine is a great choice.

  • @mui/material, formerly known as Material-UI, is one of the most popular React UI frameworks. It implements Google's Material Design guidelines, offering a vast collection of components that are both aesthetically pleasing and functional. MUI is highly customizable and provides a robust theming system, making it suitable for a wide range of applications. If you want a well-established library with extensive community support and resources, MUI is an excellent option.

  • antd, or Ant Design, is a UI library specifically designed for enterprise-level applications. It offers a comprehensive set of high-quality components and a design system that emphasizes consistency and usability. Ant Design is particularly popular in the business and enterprise application space, making it a great choice for developers building complex data-driven applications.

  • react-bootstrap is a popular library that integrates Bootstrap with React. It provides a set of Bootstrap components as React components, allowing developers to leverage the familiar Bootstrap styling and grid system while using React's component-based architecture. If you're already comfortable with Bootstrap and want to use it in your React projects, React-Bootstrap is a natural fit.

  • semantic-ui-react is the official React integration for Semantic UI, a development framework that helps create responsive and modern web applications. Semantic UI React provides a set of components that follow the Semantic UI design principles, allowing for a clean and intuitive user interface. If you prefer a library that emphasizes human-friendly HTML and a semantic approach to UI design, Semantic UI React is worth considering.

To see how @nextui-org/react compares with its alternatives, check out the comparison: Comparing @mantine/core vs @mui/material vs @nextui-org/react vs antd vs react-bootstrap vs semantic-ui-react.

Similar Npm Packages to react-bootstrap

react-bootstrap is a popular library that provides Bootstrap components as React components, allowing developers to build responsive and mobile-first web applications with ease. It leverages the power of Bootstrap's CSS framework while providing a seamless integration with React's component-based architecture. This makes it a go-to choice for many developers looking to implement Bootstrap styles and components in their React applications. However, there are several alternatives available that offer different design philosophies and features. Here are a few notable ones:

  • bulma is a modern CSS framework based on Flexbox. It is known for its simplicity and ease of use, providing a clean and minimalistic design. Bulma does not include JavaScript components, which allows developers to have complete control over the behavior of their components. If you prefer a lightweight framework that focuses solely on CSS and offers a straightforward approach to styling, Bulma is an excellent choice.

  • evergreen-ui is a React UI Framework developed by Segment. It is designed for building ambitious products and provides a set of polished React components that are easy to use and customize. Evergreen is particularly well-suited for applications that require a consistent design language and a modern look. If you are building a complex application and need a robust set of components, Evergreen UI is worth considering.

  • grommet is a React-based framework that provides a rich set of UI components and a responsive design system. It is designed with accessibility and mobile-first principles in mind, making it a great option for applications that prioritize user experience. Grommet offers a wide range of customization options and themes, allowing developers to create unique and visually appealing interfaces.

  • reactstrap is another library that provides Bootstrap components for React. It is built on top of Bootstrap 4 and offers a straightforward way to use Bootstrap's components in React applications. If you are already familiar with Bootstrap and want to leverage its components in your React projects without the need for additional configuration, Reactstrap is a solid choice.

  • semantic-ui-react is the official React integration for Semantic UI, a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI React provides a wide range of components that are easy to use and customize. If you are looking for a framework that emphasizes semantic HTML and a clean design, Semantic UI React is a great option.

To see how these libraries compare, check out the comparison: Comparing bulma vs evergreen-ui vs grommet vs react-bootstrap vs reactstrap vs semantic-ui-react.

Similar Npm Packages to semantic-ui-react

semantic-ui-react is a popular UI component library for React that provides a set of pre-designed components based on the Semantic UI framework. It allows developers to create responsive and visually appealing user interfaces with ease. The library emphasizes semantic HTML and provides a wide range of customizable components, making it a great choice for building modern web applications. While semantic-ui-react offers a robust solution for UI development, there are several alternatives worth considering:

  • bootstrap is one of the most widely used front-end frameworks for developing responsive and mobile-first websites. It provides a comprehensive set of CSS and JavaScript components, making it easy to create visually appealing layouts and components. Bootstrap has a large community and extensive documentation, which makes it a reliable choice for developers looking to build responsive applications quickly. Although it is not specifically designed for React, there are several React wrappers available that integrate Bootstrap components seamlessly into React applications.
  • material-ui is a popular React UI framework that implements Google’s Material Design guidelines. It offers a rich set of components that are customizable and designed to provide a consistent look and feel across applications. Material-UI is particularly well-suited for applications that prioritize user experience and aesthetics. With its extensive theming capabilities and responsive design features, Material-UI is a great choice for developers looking to create modern and visually appealing user interfaces in React.

To see how semantic-ui-react compares with bootstrap and material-ui, check out the comparison: Comparing bootstrap vs material-ui vs semantic-ui-react.

README for antd

Ant Design

An enterprise-class UI design language and React UI library.

CI status codecov NPM version NPM downloads

Follow Twitter dumi FOSSA Status Issues need help LFX Active Contributors

Changelog Β· Report Bug Β· Request Feature Β· English Β· δΈ­ζ–‡

❀️ Sponsors

TRACTIAN LobeHub

✨ Features

  • 🌈 Enterprise-class UI designed for web applications.
  • πŸ“¦ A set of high-quality React components out of the box.
  • πŸ›‘ Written in TypeScript with predictable static types.
  • βš™οΈ Whole package of design resources and development tools.
  • 🌍 Internationalization support for dozens of languages.
  • 🎨 Powerful theme customization based on CSS-in-JS.

πŸ–₯ Environment Support

  • Modern browsers
  • Server-side Rendering
  • Electron
Edge
Edge		Firefox
Firefox		Chrome
Chrome		Safari
Safari		Electron
Electron
Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

πŸ“¦ Install

npm install antd

yarn add antd

pnpm add antd

bun add antd

πŸ”¨ Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

πŸ”— Links

⌨️ Development

Use opensumi.run, a free online pure front-end dev environment.

opensumi.run

Or clone locally:

$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001, see more at Development.

🀝 Contributing PRs Welcome

Top Contributors of ant-design/ant-design - Last 28 days Performance Stats of ant-design/ant-design - Last 28 days
New participants of ant-design - past 28 days
Contribution Leaderboard

Let's build a better antd together.

We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contribution Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)

For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.

Issue funding

We use Issuehunt to up-vote and promote specific features that you would like to see and implement. Check our backlog and help us:

Let's fund issues in this repository

❀️ Backers

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.