What ui component library does react use?

The ui component libraries available for react are: 1. Material-UI, which has components for layout, forms, navigation, data display and many other widgets; 2. Ant Design, which has more than 60 components, with Predictable static typing; 3. Blueprint, with more than 40 components; 4. React Bootstrap, providing full compatibility with a large number of existing Bootstrap themes; 5. Onsen UI, providing tabs, side menus, stack navigation, Lists, forms and other components.

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

react component library

1、Material-UI

Material-UI is the most popular and commonly used React component library on GitHub. It's simple, lightweight, and built according to Google's Material-UI specifications. There are components for layout, forms, navigation, data display and many other widgets.

You can style your components using @material-ui/styles, a fast, scalable CSS-in-JS solution with the same benefits as styled components. Material-UI also interoperates with other major styling solutions, so you don't have to use its styles.

2. Ant Design

Ant Design is a Chinese company with a React library designed for web applications of large companies. Examples include Tencent, Alibaba and Baidu. This library has over 60 components written in TypeScript with predictable static typing. Its Chinese and English documents are concise, elegantly written, and comprehensive in content.

But Ant Design is more than just a React UI library. It is an entire design system built around the values ​​of growth, meaning, certainty and nature. Check out their resources for a Figma UI kit, landing page templates, a Sketch plugin, and more, and it’s our go-to React component library.

3. Blueprint

#As a commonly used React component library, Blueprint provides rich and popular components. Blueprint is a React UI library developed by Palantir, an American big data analysis technology company. Their React library has over 40 components, specifically optimized for complex data-intensive interfaces for desktop applications.

Blueprint is written in TypeScript, as are all code examples in their documentation. The library supports Chrome, Firefox, Safari, IE 11 and Microsoft Edge. IE10 and below are not supported due to lack of support for CSS flex layout.

4. React Bootstrap

React Bootstrap serves as a replacement for Bootstrap JavaScript. Each component is built as a true React component, so there is no need to rely on jQuery. React Bootstrap is one of the oldest React libraries and has grown steadily with React itself. Since there are a large number of old users using Bootstrap, React Bootstrap is also a more commonly used React component library.

Bootstrap’s grid system means your layout will have a fully responsive series of containers, rows and columns. You can choose between dozens of components, including badges, carousels, toasts, and jumbotrons.

It provides full compatibility with a large number of already existing Bootstrap themes, as well as a long list of components with total power for each theme. React Bootstrap updates state into a virtual DOM, which is a more stable development solution by integrating Bootstrap's functionality into React's virtual DOM.

5, Onsen UI

Onsen UI is a commonly used Reac component library designed to build HTML5 and mobile web applications . Its components include tabs, side menus, stack navigation, lists, forms, and more. All components support iOS and Android material design and automatically change the appearance of your app based on the platform.

Internally, Onsen consists of three layers: CSS components written in cssnext, web components written in native JavaScript, framework bindings for easy integration with React, and Vue and Angular.

6. Grommet

##Grommet is a component library designed for responsive, accessible and mobile-first web projects . It incorporates atomic design methods and allows for keyboard navigation, screen reader tabs, and more. It even has a list of svg icons.

Many big companies including Netflix, Uber, Boeing, HP, Samsung, and Twilio use Grommet to design their web applications. If you want your design to feel less "Googly", check out Grommet's components. , it is an excellent and commonly used React component library with very good-looking components.

7、Gestalt

Gestalt is a set of React UI components that enhance Pinterest’s design language. Its purpose is to create a shared library of design best practices. The library supports right-to-left, internationalization and dark mode.

Gestalt is relatively low maintenance due to its automatic design and code updates that run cross-platform. When a release results in breaking changes - in usage or input - it provides a codemod to simplify the upgrade process.

8. Semantic UI React

React is the official Semantic UI plug-in. It is jQuery agnostic and features a declarative API, simplified props, subcomponents, extensions, automatic control of state, and more. The library has a collection of over 50 components, including fragments, progress bars, transitions, pagination, and more.

Semantic UI React provides components, while Semantic UI provides themes in the form of CSS style sheets. You can also use instead of . I prefer Semantic UI and have some experience using it. Semantic UI React is also used as A relatively commonly used React component library.

9, Rebass

Rebass is an original component library and a commonly used React component library, styled by Brent Jackson System building. It is built to create a consistent UI with design constraints and user-defined scale. Rebass's footprint is only 4KB, which means fast design and development.

Rebass hopes to achieve minimal, useful, unconstrained, extensible and themable through first-class theming support and compatibility with Theme UI.

10. React Virtualized

#React Virtualized focuses on specific aspects of any UI in a unique React component library, making rendering tables fairly easy in most cases. With React Virtualized, web developers can easily render large amounts of data by using components such as lists, tables, grids, collections, etc. It can be used to create more user-friendly tables. React Virtualized already has a complete sequence of instructions to set it up.

11. Blueprint UI React

The Blueprint UI React component framework is the same UI development path for all new data-intensive desktop and web applications. It is a React-based UI toolkit designed for creating complex data-intensive interfaces for desktop applications. This is a great UI package that aims to provide out-of-the-box usability standards for all components and gives you access to light and dark theme modes.

12. React Toolbox

React Toolbox is a series of React components that implement Google Material Design requirements. It is based on some of the most common proposals such as CSS Modules (written in SASS), Webpack and ES6. The library is tightly integrated with your web package workflow, fully configurable and versatile.

It provides many components such as buttons, cards, date pickers, dialogues and other common elements. Enabling web developers to build stunning web applications, the library also includes comprehensive documentation.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What ui component library does react use?. For more information, please follow other related articles on the PHP Chinese website!