Best React component libraries (2024 edition)

But not all React component libraries are created equal. Some are great for general use, others are tailored specifically for web development, and many are tailored for niche use cases like enterprise-level products. In this roundup, we'll dive into some of the best React component libraries. We'll explore common developer concerns, such as use cases, documentation, resources, support, and popularity, so that, by the end of this article, you'll know which libraries make the most sense for your project.

This article was originally published in Sept. 2021. It has been updated for 2024.

GitHub Stars: 91.2k

Weekly NPM Downloads: 3.8M

Stack Overflow Questions: 22.5K

Origin: Google

Material-UI, developed by Google in 2014, is a general-purpose customizable component library to build React applications. The folks at Google designed Material-UI as an adaptable system of guidelines, components, and tools to make app building beautiful yet straightforward.

The Material-UI component library offers a wide range of options from app bars to time pickers.

Google also provides guidelines for usage, design principles, dos and don’t, and best practices for each type of component. This makes it easy for developers to build well-designed apps regardless of intuition for design.

Material-UI offers several free and paid themes to get started with. Paid themes start at $49 for a standard license and increase to up to $599 for an extended license. The core difference between standard and extended licenses is the ability to charge end users. Both are limited to the usage of the theme for a “single application.” Most themes offer a robust set of features, documentation, and support.

For those who want complete control over design elements, Material-UI allows for custom theming to “systematically customize Material Design to better reflect your product’s brand.” Material Design is beneficial for applying consistent design across your app and making global design changes with minimal effort.

ns have been posted. GitHub is used exclusively as a bugs and feature requests tracker. On the paid side, Material-UI suggests purchasing a Tidelift subscription which offers “flexibility of open-source and the confidence of commercial-grade software.” At the rate of $200/hr or $1,500/day, “Custom work” can be requested for help modifying Material-UI to meet specific requirements.

Here are a few screenshots of apps and websites built on Material UI.

See the full showcase of public apps using Material-UI here.

GitHub Stars: 89.8k

Weekly NPM Downloads: 1.3M

Stack Overflow Questions: 5.2k

Origin: Ant Financial

Ant Design (also referred to as AntD) brands itself as the “the world's second most popular React UI,” (though it's unclear who they view as the most popular). AntD differentiates itself from other React component libraries as a design system for enterprise-level products. AntD has also developed a design philosophy based on four values: natural, certain, meaningful, and growing.

Notable companies that have bought into AntD's design philosophy include Ant Financial, Alibaba, Tencent, and Baidu. Ant Design was created by Ant Financial and launched in 2016—more in this Show HN thread.

AntD offers a set of more than 50 components that serve as building blocks for enterprise applications. They also recommend using other React third-party libraries for components that fall outside of the Ant Design specification, such as the React Hooks Library or React JSON View.

Ant Design doesn't offer the same number of pre-built theme options compared to a library like Bootstrap or Material.

However, AntD offers Ant Design Pro, an out-of-box UI solution for enterprise applications. Ant Design Pro comes equipped with templates, components, and a corresponding design kit.

In addition to Ant Design Pro, AntD packages designs for data visualization, mobile, and graphic solutions so developers can start with a package based on a particular enterprise use case.

While AntD does have documentation, it doesn't offer the depth of documentation that a framework like Material-UI has. AntD's component documentation is easy to understand and includes examples and API properties for each component. AntD components also include internationalization support for dozens of languages.

Even though it doesn't appear that Ant Design offers any paid support options, it does have an engaged community and many resources for self-learning. AntD uses GitHub Issues for bug tracking, and it also facilitates community discussions via GitHub, Stack Overflow, and Segmentfault.

Here are three examples of apps and websites built on AntD:

GitHub Stars: 36.3k

Weekly NPM Downloads: 555k

Stack Overflow Questions: 750+

Origin: Segun Adebayo

Since our last roundup of React component libraries about a year ago, Chakra UI has dramatically grown in popularity. It now boasts about half-a-million downloads.

Built by Segun Adebayo in 2019, this modern component library focuses on simplicity, modularity, and accessibility. After a slight dip in popularity in 2023, Chakra UI has picked up steam, and there's a simple explanation why—Chakra-UI offers a fresh look and feel,while other libraries like Material-UI and AntD are older and can feel dated.

Chakra UI has a robust component library with over 50 components divided into the following categories:

Notable components include a Toast component for pop-up alerts and a Form Control component for building user-friendly forms. If you want to create your own components, Chakra UI provides a guide to creating components, and sample recipes to style them. In addition to these, Chakra provides 12 utility and 2 component hooks to support these components.

There is also a Pro version (early access) which offers more than 210 enterprise-ready components for utilities ranging from e-commerce to marketing.

Theming - Theming with Chakra UI is based on the Styled System Theme Specification. At the corTheming with Chakra UI is based on the Styled System Theme Specification. At the core of Chakra UI is a default theme to define color palette, type scale, font stacks, breakpoints, border-radius values for an application. Customized themes can then be layered on top of the default theme. Chakra UI also offers a framework to customize components using modifier styles that alter components based on specified properties or state.

Chakra UI supports Dark Mode out-of-the-box and most pre-built components are dark-mode compatible. It also provides a useColorMode hook which can easily be used to change the application's color mode. The styled-system also supports features like CSS variables and conditional semantic tokens.

Chakra offers ample documentation for installation, components, and concepts unique to Chakra UI. There is a wide array of community resources which include talks, videos and blogs. There is also a showcase which includes community projects built with Chakra-UI that you can take direct inspiration from. Finally, strong GitHub (12 core contributors) and Discord communities (8k+ members) provide additional support.

Accessibility is one of the core principles of Chakra-UI. Segun Adebayo wanted to create a design system that would make it easier for other developers to make the web accessible. All Chakra-UI components strictly follow the WAI-ARIA standards.

We've grabbed a few screenshots from the Chakral-UI website below. See the full showcase of public apps using Chakra-UI here.

GitHub Stars: 22.2k

Weekly NPM Downloads: 1.2m

Stack Overflow Questions: 4k

Origin: Twitter

Initially named Twitter Blueprint, the Bootstrap framework was built by Mark Otto and Jacob Thornton at Twitter. Bootstrap predates React by a couple of years (Bootstrap’s initial release was August 19, 2011, while React’s was on May 29, 2013). Bootstrap started as an open-source CSS framework centered around helping developers build responsive, mobile-first front-end websites and applications, and continues to grow in popularity since our 2023 roundup.

React-Bootstrap is a bit different but very similar to the original Bootstrap framework. React-Bootstrap replaces the Bootstrap JavaScript, and each component has been built from scratch as a proper React component, without unneeded dependencies like jQuery.

With just under 30 components, React-Bootstrap also doesn’t provide the breadth of component coverage that a Material-UI or AntD offers. Less can be more, however, especially for those familiar with Bootstrap who know it can accommodate their use case.

Due to the widespread use of Bootstrap, there are thousands of free and paid Bootstrap themes available. Generally, custom Bootstrap themes work with React-Bootstrap as long as Bootstrap-defined classes and variants are used.

While React-Bootstrap doesn’t offer any official support, there is a massive, active community and plenty of resources supporting Bootstrap. The React-Bootstrap website suggests starting with support in one of three places:

Here are a few examples of apps and websites built on React Bootstrap, including Corn Studio and Plastic Design.

GitHub Stars: 20.4k

Weekly NPM Downloads: 152k (as of January 2023)

Stack Overflow Questions: 350+

Origin: Palantir

Blueprint is an open-source React UI kit developed at Palantir. It's different from other React frameworks as it's “optimized for building complex data-dense interfaces for desktop applications.” Given it was developed at Palantir, that’s not exactly a huge surprise.

In addition to its core component package, Blueprint separates component libraries according to use cases.

Core components: The essential components for any app built on Blueprint. This includes components from buttons to form controls to tooltips and trees.

Datetime components: A complete set of components for building apps with date and time dependencies. These are components like a DatePicker, DateRangeInput, DateInput, etc.

Select components: A package of components for selecting items from a list such as Select, MultiSelect, Omnibar, QueryList, etc.

Table component: A robust table component the features cell and header rendering, virtualized viewport rendering, editable headers and cells, and more.

Timezone component: A TimezonePicker for handling and selecting Timezones.

Icon components: A package of over 300 vector UI icons which can easily be modified by color, size, and effects.

Blueprint is not the framework to use if you’re looking for preset-themes; there is a third-party theme framework, but with little adoption. However, Blueprint does offer light and dark mode themes out of the box, and design elements like classes, color schemes, and typography are customizable.

While Blueprint provides detailed documentation, it lacks community and support options. The Blueprint GitHub repo appears to be the most active place for reporting issues and getting support from contributors. There are also a few hundred Blueprint questions on Stack Overflow.

GitHub Stars: 4.8k

Weekly NPM Downloads: 8M

Stack Overflow Questions: 84

Origin: Modulz/WorkOS

Radix UI is an extremely popular React component library (over 7M weekly downloads!) that was initially published by the Modulz team in 2020. WorkOS acquired Modulz, and Radix UI is now maintained by the WorkOS team. Radix UI's design drives its popularity, prioritizing fast development, flexibility, and accessibility.

Like many other libraries, Radix features component primitives and first-party support for themes. These features aren’t too different from those boasted by other frameworks on this list. But what makes Radix UI notably different is how it champions incremental development. Radix components are installed and added individually; while the library’s collection of packages could serve as a base component library for a new application, Radix was designed to be implementable in piecemeal fashion for any project. This makes it a viable option for applications that embrace a component library well after their inception.

Radix components ship with zero styling and an open component structure. This can be easily wired to React applications while passing WAI-ARIA guidelines. Their open design enables developers to access every component part, making it easy to connect event listeners, props, and refs. Radix components are also, by default, uncontrolled; alternatively, they can be controlled by Radix, depending on preference.

Radix components notably feature a special asChild prop that enables developers to access the component’s features and accessibility support while crafting a personal JSX React component. Here, Radix is serving a blueprint that is cloned; it’ll issue an error if the custom component doesn’t support the necessary props. This strategy prompts good, united design without hampering developer freedom.

Because of Radix’s massive adoption, there is a sizable community behind the library. The Github issues are active and every question posted to their discussion board gets a prompt reply. It has gained adoption by sizable companies like Basedash, Linear, Supabase, and Liveblocks.

GitHub Stars: 23.9k

Weekly NPM Downloads: 58.2k

Stack Overflow Questions: 69

Origin: Vitaly Rtishchev

Mantine is a fully-featured React component library with 100+ customizable components and 30+ hooks which facilitates building fully functional and accessible web applications with great speed. It works in all modern environments, including Next.js, Gatsby.js and create-react-app. Since our roundup last year, its popularity has dramatically increased (58k to 270k weekly downloads). In 2022, it had less than 25k weekly downloads. This makes Mantine the fastest-growing library in this list.

Components are the core components library is extremely extensive and offers niche components like color picker, date-range picker and timelines. With over a hundred different components, you will rarely ever need to create your own. Each component also supports styles overriding for internal elements inside with classes or inline styles.

The Mantine theme is an object that you can subscribe to from anywhere using context and extend with any amount of additional colors, fonts, shadows and so on. All components also support dark theme out of the box.

Mantine comes with more than 30 hooks which can be used independently of the component packages to manage state and UI. Additional features include a Transitions API, fully-featured Notifications system and a Rich Text Editor.

Mantine has a friendly community on GitHub Discussions and Discord.

Github stars: 65k

Weekly NPM downloads: N/A

Stack overflow questions: 247

Origin: Shadcn

Shadcn/ui is a recently popular quasi-component library by a popular developer that goes by shadcn. Shadcn is a design-first collection that prioritizes a sleek, minimalist, midnight style that has been popular amongst developer-focused applications. Shadcn’s examples include mail clients, dashboards, music applications, and authentication.

Shadcn/ui is typically mentioned in component library conversations, but is technically not a component library by its own admission. It is not a package, not installed via NPM, and doesn’t go through formal releases. Instead, it is a collection of open-source code snippets that can be copied and pasted into an application (it does, however, require for certain dependencies to be installed). This approach is intentional to maximize developer independence. Because Shadcn’s end goal is similar to other projects on this list, it is a worthy inclusion here.

Shadcn/ui are React components and therefore only work with React frameworks. Shadcn has an npx utility that installs components for users with 70k weekly pulls; this is not a package, just a fancy copy-and-paste install. Shadcn uses Radix UI primitives as a backbone.

Because Shadcn is not developed by a company, there is no official corporate support channel. However, it does have a very active discussion board and active issues. There are also plenty of community projects that are built on or modify shadcn components.

GitHub Stars: 23.9k

Weekly NPM Downloads: 1.4M

Stack Overflow Questions: 172

Origin: TailwindLabs

Headless UI was built by Tailwind Labs as a set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Tailwind CSS itself was built with the goal of allowing developers to quickly build modern websites "without ever leaving your HTML". It is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90. The CSS framework is extremely popular today with over 77.6k stars on GitHub. Headless UI takes Tailwind CSS one step further by providing complete React components which are un-opinionated when it comes to styling. You can style them using Tailwind CSS which is provided out-of-the-box to suit your specific needs.

Headless UI provides the standard components including Toggle Switch, Autocomplete, and Modal. Each component comes with a basic example, directions on how to style each part of it, and directions on how to customize it to your needs. It also lists an extensive API for transitions and accessibility notes. The other options on this blog post may be better for you for quicker development.

However if you have specific look and feel customization requirements, Headless UI is extremely powerful. The Tailwind CSS team is also behind Tailwind UI, a premium version of Headless UI. The team also build Catalyst, a batteries-included component library that takes a similar approach as shadcn—something that’s installed via a copy-and-paste process and then modified after.

Headless has a solid community on GitHub and the Discussions page is active with feature requests, show and tells, and general help. It also points to the Tailwind CSS discord server where you can connect with others using the library.

GitHub Stars: N/A

Weekly NPM Downloads: N/A

Stack Overflow Questions: 299

Origin: TailwindLabs

Tailwind UI is a component library with dedicated components for Vanilla JS, React, and Vue. Tailwind UI is a more premium, fleshed-out component library built on HeadlessUI and TailwindCSS. It isn’t as open-ended and isolated as Catalyst (a project by the same team), but is incredibly popular and uses a similar NPM-less approach, opting for a NPX-driven route.

One of Tailwind UI’s strengths is that it features a lot of components. There are dedicated components for virtually any part of an app. For a team section. For a shopping cart. For a product feature page. Tailwind UI’s components go farther than a typical component library, which matches the opinionated design choices made by TailwindCSS.

The catch? Tailwind UI is not free. It is a premium component library that $299 as a one-time payment. But for many companies, that is a cheap, non-subscription charge to pay for an explosion of pre-built components.

Each React Tailwind UI component is a single component that makes no assumption on what props are to be exposed and where data is sourced from.

Tailwind UI has an official support channel because it is a licensed product by the Tailwind team. However, this is just for licensing and account management issues. Tailwind customers get access to a private Discord channel where they can ask questions to the community; Tailwind doesn’t directly offer technical consulting or support. However, there is significant traffic on StackOverflow on Tailwind UI.

Disclaimer: As React developers ourselves, we like to think that this overview is objective, but bias is entirely possible as we are writing about our own product.

Retool is a fast way to build and deploy user-facing tools, both internal and external. It's used by thousands of startups and enterprises alike, including Amazon, OpenAI, Snowflake, Stripe, and Brex. It comes with a complete set of more than 90 powerful components out of the box, which are optimized for the things that matter most for internal tools. Retool's components cannot be used independently in React projects. Instead, Retool serves as both an app-building platform and component library in one, with which you can:

Retool also lets you deploy applications as a cloud-hosted solution or on-prem and comes with enterprise capabilities for security, reliability, and permissioning.

Out of the box, Retool comes with 100+ components to build internal applications. It also offers iFrame and HTML components if you need to load other interfaces into your applications dynamically. You can also build custom components, discussed in detail in the next section.

Of component libraries available, Retool's offers the most comprehensive set across data types, comprising:

Notably, Retool supports custom React components that can be used alongside its pre-built offerings. Custom components are developer-friendly by design: they are built in local development environments before they are deployed to Retool. They still integrate with Retool’s grander ecosystem, including the drop-and-drag editor.

Each custom component is encapsulated in a named library. Retool uses these library names to identify components to any Retool user via the Retool GUI.

Retool’s Typescript API enables developers to add state to components, manage events, and set sizing defaults.

Styles work via style editors that are available across all Retool plans. They allow you to customize your Retool components within the Retool UI by editing the style properties (e.g., color, border-radius) of any component.

Themes are available on the Retool Pro and Enterprise plans and allow you to apply default styles across any of your applications.

Icons include 3,000+ searchable icons with bold and outline styles.

Custom CSS is helpful when inspector styles and themes don't cover your needs. You can leverage CSS directly in Retool. Custom CSS styles can be applied across all applications within your org settings.

Templates are ready-made as a quick starting point for building internal tools from real-world use cases.

Compared to React component libraries, Retool offers far more extensive support and support. Customers can turn to the following support channels:

GitHub Stars: 13.2k

Weekly NPM Downloads: 229k

Stack Overflow Questions: 2.7k

Origin: Jack Lukic

Similar to Bootstrap-React, Semantic UI React is the React flavor of the Semantic web framework. Also, like Bootstrap-React, Semantic UI React is jQuery-free, making it fully React compatible. Since our 2023 roundup, its popularity has stayed consistent.

Semantic UI React has a respectable library of over 50 components. Semantic UI acts as a layer on top of the React components and offers Semantic themes as CSS stylesheets.

Semantic UI React's components are grouped in the following categories:

When using Semantic UI React, it’s important to note that it does not have custom theming options and fully relies on the theming of Semantic UI. Semantic UI theming and design is based around Fredrick Brooks’s concept of “progressive truthfulness.”

The idea is to remove complication and analysis paralysis from web development. Rather than building from a blank slate, developers can specify how components should differ from the default theme using CSS variables and let Semantic UI handle the rest.

In addition to theming, Semantic UI React provides layout examples for using grids, responsive design, sticky nav, webpage construction, etc. These layouts offer a useful starting point vs. starting from a blank slate.

Semantic UI React provides thorough documentation. Most documentation of components includes code to try the component, codesandbox, and live examples. Within the Buttons component alone, there are 36 different button variations from a static button to floating groups of buttons — all come with code to copy/paste.

GitHub Stars: 12.3k

Weekly NPM Downloads: 8k

Stack Overflow Questions: -

Origin: Segment

Evergreen is a React UI Framework developed by Segment. It centers around a design system that was created for building “ambitious products” on the web.

Evergreen offers 30+ components built on top of a React UI Primitive. Evergreen also provides “patterns” which are common reusable combinations of components.

Evergreen ships with two themes:

While there is no theme builder with Evergreen, it offers an extensible theming architecture to customize the look and feel of the components as needed.

In addition to documentation, Segment has created an Evergreen Figma library available on Figma Community.

GitHub Stars: 8.3k

Weekly NPM Downloads: 22.7k

Stack Overflow Questions: 103

Origin: Hewlett Packard Enterprise

Grommet was developed by HPE and offers a more vibrant (and not so Google-y) look and feel compared to alternatives like Material-UI or AntD. From their marketing site copy, Grommet positions itself as “a React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package.”

Reading between the lines, Grommet is lighter weight, and from the looks of their website design, it also has bolder component designs.

Grommet provides a bold and robust set of components to use. They categorize components into the following categories:

While there are not a lot of pre-packaged Grommet themes available, Grommet does provide two useful tools for customizing a theme:

Grommet doesn’t offer any hands-on support. They do have an active Slack community, and, like other frameworks, bugs are submitted via GitHub Issues. In addition to that, Grommet provides resources, including a template/pattern library, component library on Storybook, and a codesandbox for each component.

GitHub stars: 7.9k

Weekly NPM downloads: 44.4k

Stack Overflow questions: 11

Origin: Brent Jackson

Rebass was created by Brent Jackson, who was a front-end developer at Gatsby. React primitive UI components are at the core of the Rebass library, which are coupled with a Styled-System. The Rebass Styled System is compatible with CSS-in-JS libraries and reduces the need to write custom CSS into an application using style objects instead of embedded CSS strings. As a result, developers can add a theme and design elements on top of Rebass primitives. Rebass is also very lightweight, with a footprint of about 4KB. However, since our 2023 roundup, its weekly downloads are on the upswing (from 25.4k to 44.4k).

Rebass comes with a foundational set of primitive components that can be “extended” to build a component library with a consistent API and styles defined in a design theme. Foundational include primitives for app structure (responsive boxes and flexbox layouts), text (heading, text, link, button), images, cards, and forms. The Forms component includes many interactive sub-components like inputs, textarea, sliders, switches, and checkboxes.

In addition to primitives, Rebass offers documentation on recipes for common use cases like grids, navbar, and image cards.

While Rebass doesn’t have a library or 3rd-party ecosystem of pre-built themes, it does offer a lot of theming flexibility and customization. Themes are applied in Rebass using a ThemeProvider component. Rebass follows Theme Specification for defining theme objects and design tokens for use with UI components. Rebass is compatible with Theme UI and Styled System, which both work with Rebass with no additional configuration required.

Rebass provides thorough documentation centered around getting developers quickly up to speed on how Rebass works. As the concepts of primitive components, theming, and design systems are understood, developers using Rebass can fully customize and extend the library. There is no paid support or official Rebass communities listed in their documentation.

GitHub stars: 18.8k

Weekly NPM downloads: 71k

Stack Overflow questions: 82

Origin: Junior Garcia (Sponsored by Vercel)

Last year, Next UI was still in Beta. Since then, it’s formally launched and has skyrocketed in popularity, soaring from 9k to 71k weekly downloads. One highlight of the library is that all its components support cross-browser server-side rendering.

All components are designed in a unique way and not tied to any visual trend or design rule. They follow WAI-ARIA guidelines and provide keyboard support and sensible focus management. Customizing the default themes is straightforward and dark mode can be applied with just a few lines of code. The built-in Stitches library allows you to customize components via css prop, styled function or native CSS class names.

The library aims at improving performance by avoiding unnecessary style props at runtime and only injecting styles that are actually used (critical path CSS).

The library has an active community on Discord and GitHub, too, if you'd like to get involved.

GitHub stars: 5.2k

Weekly NPM downloads: 54.7k

Stack Overflow questions: 30

Origin: —

Theme UI is a library for creating themeable React user interfaces. It mainly follows constraint-based design principles. Theme UI is used by developers for customizing base components, creating themes, and developing their own design systems. There are two main steps to styling with Theme UI. The first step is building your theme which includes things like defining fonts and colors. The next step is styling individual components, which gives you finer-grained control over your site.

Theme UI also lets you style MDX content, works with existing styled systems and component libraries, and has built-in support for dark-mode and mobile-first responsive styles.

One differentiating feature of Theme UI is that it allows you to style static sites. Theme UI has a Gatsby plugin and can be used with any Gatsby theme or site. It is already used in many official Gatsby themes.

Theme UI has fairly comprehensive documentation which includes directions for theming, styling MDX, and custom hooks. Resources also include guides and recipes on usage and building custom components.

GitHub stars: 5.6k

Weekly NPM downloads: 105.8k

Stack Overflow questions: 222

Origin: Primefaces

PrimeReact is an extensive React component library which is used by large corporations around the world. Between 2023 and 2024, its popularity has jumped from 78.7k weekly downloads to 105.8k.

PrimeReact has over 90 React components that you can directly start using in your app. Some unique components it offers include TreeSelect, Organization chart, Terminal and Captcha. PrimeReact also offers highly customizable templates and 280+ ready to copy-paste UI blocks to quickly develop any interface.

The library is crafted on a design-agnostic infrastructure and allows you to choose the look-and-feel of existing popular libraries like Material and Bootstrap, or lets you develop your own. It has its own Theme Designer which is GUI based and has 500+ variables to tweak.

PrimeReact provides support services and can respond to feature or enhancement requests within one business day. PrimeReact is used by large corporations including Mercedes, eBay, Nvidia, Intel, American Express, and Lufthansa.

React’s component libraries are sprawling, covering tons of use cases. From popular, generalist libraries with plenty of pre-built themes like Material-UI to more targeted, use case-specific libraries like Blueprint, the whole world’s an oyster for React devs.

Of course, for those developers looking to build interfaces quickly with pre-built components, Retool is a popular choice among startups and enterprises alike. If you're ready to give it a try, sign up for a free account and start building today.

Thanks to Mathew Pregasen for support updating this article!