Because of React’s ubiquity (200k+ stars on GitHub), developers have a near-endless supply of UI libraries with custom components to draw upon to build applications. But not all React component libraries are created equal. Some are best for general purposes, others were created specifically for web development, and many are tailored for niche use cases like enterprise product production.

In this post, we’ll review popular React component libraries considering factors we as developers deem important: use cases, documentation, resources, support, and, yes, popularity.


Table of contents


Material-UI

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
83.7k1.7M1MGoogle

Developed by Google in 2014, Material-UI 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.

Material-UI components

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

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-guidelines

Material-UI themes and theming

Material-UI offers several free and paid themes to get started with. Paid themes start at $59 for a standard license and increase to up to $599 for an extended license. The key 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.
material-ui-customization

Material-UI documentation and support

Material-UI is well documented and supported. Documentation covers everything from installation to components to styling and guides for implementing utilities like server-side rendering and localization.

For support, there’s plenty of free options like the Material-UI community, Stack Overflow, and GitHub. Material points technical questions to Stack Overflow, where more than 20k questions 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 $1500 per day, “Custom work” can be requested for help modifying Material-UI to meet specific requirements.

Apps and websites built on Material-UI

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


Ant Design (AntD)

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
83.6k640k4.7kAnt Financial

Ant Design (also referred to as AntD) brands itself as the "The world's second most popular React UI" although 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, 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 was launched in 2016—more in this Show HN thread.
antd-serp-result

Ant Design components

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 theming

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.
antd-theme-designer

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.
antd-packages

Ant Design documentation and support

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 and uses Less.js for styling components.
antd-api-documentation

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

Examples of apps and websites built on Ant Design

antd-website-examples


Chakra UI

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
30.4k205k500+Segun Adebayo

Since our last roundup of React component libraries about a year ago, Chakra UI has lessened in popularity, with fewer weekly downloads, but still has racked up over 30k stars on GitHub in less than three years. Built by Segun Adebayo in 2019, this modern component library focuses on simplicity, modularity, and accessibility. While other libraries like Material-UI and AntD have been around for a while and can feel dated, Chakra-UI offers a fresh look and feel.

Components — 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 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.

Documentation and resources — 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 - Accessibility is one of the core principles of Chakra-UI as 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.

Apps and websites built on Chakra-UI

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

React-Bootstrap

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
21.4k837k3.9kTwitter

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, and 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 roundup last year.

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.

React-Bootstrap components

React-Bootstrap’s component library skews toward web development. 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.

React-Bootstrap themes and theming

Due to the widespread use of Bootstrap for web development, 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.

React-Bootstrap documentation and support

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:

  1. Stack Overflow to ask specific, detailed questions
  2. Reactiflux Dischord to discuss via chat
  3. GitHub Issues to report bugs

Apps and websites built on Bootstrap

built-on-react-bootstrap


Blueprint

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
19.5k98.5k (January 2023)355Palantir

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.” Not a huge surprise, given Blueprint’s Palantir origins.

Blueprint components

In addition to its core component package, Blueprint separates component libraries based on use cases and significant dependencies.
blueprint-components

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

Datetime components — offer 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 — 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-icons

Blueprint themes and theming

Blueprint is not the framework to use if you’re looking for a variety of themes to start from. However, Blueprint does offer light and dark mode themes out of the box, and design elements like classes, color schemes, and typography are customizable.

Blueprint documentation and support

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.


VisX

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
16.4k6k13AirBnB

VisX, created by Airbnb, is different from all the other component libraries in this list. Instead of high-level components, VisX offers a collection of low-level visualization components and primitives for React which use d3 for calculations and math under the hood. It is meant to be built upon and "unopinionated on purpose" such that it integrates with your React app's existing state management, animation library, or CSS-in-JS solution instead of bringing its own.

Mixing two mental models of the DOM (for d3 and React) has always been tedious and complicated. Copy and pasting d3 code into React hooks and lifecycle methods is error-prone and difficult to maintain. VisX solves this issue by abstracting away the d3 details and providing the components and utilities in the form of standard React APIs and patterns.

Packages - Individual packages can be roughly categorized as follows:

Chart primitives: components and utilities like axis and tooltip to build your own charts

Layouts & specialized: offer unique components like heatmap, wordcloud, and network

Interactions: these primitives like brush, drag, and zoom enhance user experience

SVG utilities: they help build interactive and complex SVGs for your needs

Data utilities: these offer tools like mock data to assist in building visualizations

The categorization of these primitives into packages helps keep your bundle sizes down as you can use only what you need.

VisX documentation - VisX is very well documented. Each component has a description, installation and integration instructions, an API list and some examples. All the examples have accompanying CodeSandbox links to play around with. They also have a Getting Started Tutorial and various blog posts in addition to the huge gallery of example visualizations built using VisX.

*Visx quality and evolution

VisX was released as open-source after 3 years of development which included 2.5 years of production use at Airbnb to build internal data tools and visualizations. Prior to launch, it was completely rewritten in TypeScript to improve safety and developer experience. Due to this, it has quickly gained popularity (16.4k stars on GitHub as of January 2023) and is being used by many teams to build their own visualization components and libraries.


Headless UI

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
18.3k401k104TailwindLabs

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 63.5k 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 components - 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.

Headless UI support - Headless has a good 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.


Retool

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 internal tools. It's used by thousands of startups and enteprises alike, including Amazon, DoorDash, Snowflake, Stripe, and Coinbase. It comes with a complete set of powerful 90+ 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:

— Compose applications with 90+ drag-and-drop components

— Connect to any data source or API to work with all of your data sources seamlessly in one app

— Customize how your app works by writing JavaScript anywhere inside of Retool

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

Retool components

Out of the box, Retool comes with 90+ components to build internal applications. It also offers an IFrame and HTML components if you need to load other interfaces into your applications dynamically, and you can also build custom components.

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

Text Inputs --- components for single, multiline, and rich text with built-in validation and options for emails, URLs, and passwords.

Number Inputs --- components for numeric data with built-in validation and options for currency, percent, rating, and sliders.

Select Inputs --- components for choosing one or many options like select, listbox, checkbox, switch, radio group, and segmented control.

Calendar Inputs --- components for dates and times with support for automatic timezone handling.

Special Inputs --- components for unique inputs like uploading a file, drawing a signature, leaving a comment, recording audio, and scanning bar and QR codes.

Buttons --- buttons, links, and menus with built-in event handlers to navigate, trigger queries, control components, and more.

Table --- display, filter, aggregate, and edit your data with 20+ column types and the ability to link several different data sources.

Chart --- create data visualizations with interactive bar, line, and pie charts, built using Plotly.

Presentation --- components that provide users with visual context such as alert, avatar, image, video, progress bar, and statistic.

Containers & Forms --- group components together in a card, tab, list, accordion, modal, or multi-step flow.

Navigation --- components for navigating paginated data, multi-page apps, or multi-step flows.

Integrations --- pre-built UI integrations including Stripe card forms, S3 file uploaders, and custom API authentications.

Retool styles and theming

Styles --- Style editors are available across all Retool plans and 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 --- Themes are available on the Retool Pro and Enterprise plans and allow you to apply default styles across any of your applications.

Icons --- Select from 3,000+ searchable icons with bold and outline styles.

Custom CSS --- 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 --- Retool also offers ready-made templates as a quick starting point for building internal tools from real-world use cases.

Retool documentation and support

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

Component reference --- Browse components, see examples of different configurations in action, and explore API docs for component properties, methods, and events.

Community forum --- Retool's Discourse forum is the best place to get tactical product help.

Power users' Slack --- If you're a Retool power user, you can request access to our sort-of-exclusive Slack group for our most engaged developers.

Retool University --- a learning course for getting started with Retool from scratch.

Intercom --- use the Intercom chat within the Retool platform to for live support

Email --- send an email to support@retool.com

Enterprise support --- Retool customers on enterprise plans get access to a dedicated support representative.

Examples of apps built on Retool


Semantic UI React

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
12.9k160k2.7kJack 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 to make it fully React compatible. Because of its origins in aiding with responsive, HTML-friendly web design, Semantic for React is better suited for web development vs. application building. Since our roundup last year, its popularity has stayed consistent.

Semantic UI React components

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.

semtantic-components

Components grouped in the following categories:

Elements — includes foundational components like buttons, dividers, lists, images, and headers. More specialized components like image reveal and rails for content that protrudes borders are also included in the Elements grouping.

Collections — components like breadcrumbs, forms, grids, menus, and tables are included in the Collections category.

Views — visual components like cards, advertisements, comments, feeds, etc., are included in the Views category. Note: that many of these components (e.g., advertisements) are unique to Semantic UI.

Modules — includes modular components like modals, popups, progress bars, and more.

Behaviorsvisibility, which provides a set of callbacks for when content appears, is the sole component in the Behaviors category.

Add-ons — additional components like radio buttons, toggles, and sliders are included in this category.

Semantic UI React themes and theming

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.”

Progressive truthfulness is perhaps a better way to build models of physical objects…Start with a model that is fully detailed but only resembles what is wanted. Then, one adjusts one attribute after another, bringing the result ever closer to the mental vision of the new creation, or to the real properties of a real-world object.
Frederick Brooks, The Design of Design: Essays from a Computer Scientist

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-layout-examples

Semantic UI React documentation and support

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.


Evergreen

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
12k5k-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. However, since our roundup last year, its weekly downloads have fallen significantly (11.4k → 5k).
segment-evergreen

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

Theming — Evergreen ships with two themes: 1) A default theme that reflects Segment’s current brand, and 2) a classic theme from the first version of Evergreen. 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.

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

Grommet

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
8.1k19.2k96Hewlett 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-hpe-layouts

Grommet components

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

Layouts — a system for layout of an app with components like headers, footers, grids, cards, sidebars and more.

Type — components for headings, markdown, paragraph, and text.

Color — set color schemes for branding, accents, status, and neutral colors.

Controls — components that let users interact with an app like menus, buttons, navbars, etc.

Input — components where users input things like text, check boxes, file uploads, etc.

Visualizations — components for more rich visualizations like calendars, charts, avatars, etc.

Media — components for video, images, and carousels.

Utilities — catch-all for components that improve user experiences like keyboard shortcuts, responsive elements, infinite scroll, etc.

Grommet themes and theming

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

  1. Grommet theme designer — an interactive demo admin panel to create custom Grommet themes by adjusting elements in the admin panel itself.
  2. Grommet designer — an interactive canvas that lets you build and save experiences with grommet components.

grommet-theme-designer

Grommet documentation and support

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.


Rebass

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
7.9k52.5k14Brent Jackson

Rebass was created by Brent Jackson, who is currently 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 build faster and 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 roundup last year, its weekly downloads have fallen significantly (from 52.5k → 25.4k).

Rebass components

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.
rebass-components

Rebass themes and theming

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 documentation and support

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.


Mantine

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
16.4k58.2k69Vitaly 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 increased significantly in 2023 (21.5k → 58.k weekly downloads).

Components - 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.

Theming - 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.

Additional features - 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 Notifcations system and a Rich Text Editor.

Mantine has a friendly community on GitHub Discussions and Discord.

Next UI

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
8.7k9kn/aJunior Garcia (Sponsored by Vercel)

This library created by Junior Garcia and sponsored by Vercel is still in Beta but looks quite promising. In the last year, its popularity has increased (4.5k → 9k 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.

Server-side rendering improves developer experience by building components such that you don't have to import and combine multiple components to display just one. 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 if you would like to get involved.

ThemeUI

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
4.8k42k21

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.

Styling static sites

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.

Documentation and resources

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.

PrimeReact

GitHub StarsWeekly NPM DownloadsStack Overflow QuestionsOrigin
3.4k78.7k222Primefaces

PrimeReact is an extensive React component library which is used by large corporations around the world. Between 2022 and 2023, its popularity has increased (39.5k → 78.7k weekly downloads).

It has over 90 React components that you can directly start using in your app. Some unique components it offers are: 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-an-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.

Enterprise support
They also provide support services and can respond within 1 business day to feature or enhancement requests. PrimeReact is used by large corporations including Mercedes, ebay, Nvidia, Intel, American Express and Lufthansa.