2023 年 React 100个流行UI组件库 一定要收藏

打开文章来源

这里有最丰富最流行的React UI组件库，这是最全的集锦，如果你需要考虑更换更好的组件库，就来这里吧！

UI 组件库

• ⭐ Material-UI (MUI) : 世界第一 UI 组件库, 使用人数超多

• ⭐ Ant Design / Ant Design Mobile - 阿里巴巴

• ⭐ Chakra-UI

• • chakra-templates 使用 chakra-ui 做的代码块 , 改改文字就能用

• ⭐ Mantine

• ⭐ react-bootstrap / reactstrap - 两个 Bootstrap 风格的 React 组件库 , 使用人数也非常多

• ⭐ zarm - 众安 (移动端)

• ⭐ react-vant - 基于 Vant 样式 (移动端)

• PrimeFaces - 许多大厂都在用

• fluent-UI - 微软

• cloudscape-design/components - AWS (亚马逊)

• react-spectrum - Adobe

• ring-ui - JetBrains

• semi-design - 抖音

• arco-design / arco-design-mobile - 字节跳动

• TDesign - 腾讯

• kiwicom/orbit - Kiwicom

• Shopify/polaris - Shopify

• monday-ui - monday.com

• primer/react - github ( ← Github 公司)

• appnexus/lucid - AppNexus / Xandr

• kaizen-design-system - Culture Amp

• palmetto-components - palmetto

• toptal/picasso - toptal

• gsoft-inc/sg-orbit - ShareGate

• storybookjs/design-system - StoryBook

• iTwin/iTwinUI

• launchpad-ui

• narmi/design_system

• Codecademy/gamut

• govuk-react

• carbon-design/carbon

• twilio-labs/paste

• grommet

• nextui - 非常漂亮的组件库

• ⭐ radix-ui - 高质量的无样式组件库

• ⭐ shadcn/ui

• fundamental-styles

• grafana-ui

• passbolt/passbolt_styleguide

• massgov/mayflower

• rsuite

• react-md

• headless-ui

• blueprint

• OnsenUI

• grommet

• Vechai UI

• Semantic-UI-React

• paljs-ui

• react-desktop

• evergreen

• webrix

• ionic-framework - (移动端)

• Kendo UI

• quark-design - 哈啰 (移动端)

• zag

• RocketCommunicationsInc/astro

• salesforce/design-system-react

基于 TailwindCSS 的组件库

所有前端框架都适用, 可以完成绝大部分的需求

有一些是原生 Tailwind 大号代码块, 直接复制就可以用在项目中.

• daisyui

• mambaui

• tailblocks

• tailwindcomponents

• flowbite

• lofiui

• konsta

• Tailwind-Elements

• tail-kit

• vechaiui

• flowbite

基于 WebComponents 的组件库

众所周知 WebComponents 组件 适用于任意前端框架

• adobe/spectrum-web-components - Adobe
• shoelace-style/shoelace
• microsoft/fast - 微软

组件模块

• ⭐ swiper - 超级牛x的 触摸滑块 / 轮播图 (适用于所有流行框架)

• ⭐ react-spring - 非常强的动画库

• ⭐ Framer Motion - 动画库

• ⭐ react-hot-toast - 非常不错的 Toast 库

• ⭐ react-spinners - 超多炫酷的 loading 组件

• ⭐ react-icons - 超多的Icons

• TanStack Ranger - 多范围滑块

• TanStack React-Charts - 图表

• material-react-table - MUI + React table

• heroicons - tailwind 开源的 Icons

• react-live - 实时代码编辑和展示

• FormidableLabs/use-editable - 将元素转换为完全可渲染和可编辑的内容

• react-responsive-masonry - 瀑布流排列

• react-player - 视频播放器

• prism-react-renderer - prism 代码高亮

• diegomura-react-pdf / wojtekmaj-react-pdf - 两个 PDF 的库

• transition-hook - 动画库

• floating-ui - 浮动定位

• slate - 富文本

• draft-js - facebook 开源的 富文本

• react-photo-view - 一个非常不错的大图查看

• react-select - 选择框

• react-beautiful-dnd - 拖放

• react-dnd - 拖放

• react-grid-layout - 具有响应断点的可拖动和可调整大小的网格布局

• react-data-grid - 类似Excel的网格组件

• react-draggable - 拖动

• react-resizable-and-movable - 调整大小与拖动

• react-resizable - 调整大小

• react-resizable-box - 调整大小

• react-spaces - 支持 嵌套,调整大小,可滚动的布局

• react-dates - 移动端友好的日期选择

• react-big-calendar - 日期选择

• react-datepicker - 日期选择

• react-list - 无限滚动

• react-joyride - 创建 新手指引

• react-loading-skeleton - 骨架

• react-spinkit - loading 动画

• rheostat - 滑块

• qrcode.react - 二维码

• react-archer - 在元素之间绘制箭头

• react-pdf-viewer - PDF 查看器

• react-parallax-tilt - 倾斜悬停效果

• react-tsparticles - 粒子动画

• react-accessible-accordion - 手风琴

• react-cookie - cookies

• react-slick - 走马灯

• nuka-carousel

• react-device-detect - 检测设备

• react-colorful - 颜色选择器

• react-modal - 模态对话框

• cleave.js - 键入时格式化输入文本内容

• react-fontawesome - Font Awesome 5

• react-advanced-cropper - 图像裁剪

• ⭐ atropos - 非常牛X的3D视差悬浮

• ⭐ emoji-mart 超多的 emoji

• emoji-picker-react 超多的 emoji

• react-date -日期选择器 ( Airbnb )

• elastic-charts - 图表 ( elastic ) (做 ElasticSearch 的公司)

• Shopify/polaris-viz - Shopify

• react-financial-charts

• reaviz/reaviz - 数据可视化

• reaviz/reaflow - 工作流编辑器、流程图和图表。

相关库

• ⭐ TanStack Query (react-query) : 请求状态管理

• ⭐ react-router : 路由

• ⭐ classnames : 拼接 className

• ⭐ clsx : 拼接 className

• ⭐ immer : Immutable (不可变数据)

• ⭐ TanStack Table (react-table) : table 操作, 支持任何UI组件库

• swr : vercel 开源的 请求状态管理库

• TanStack Location : 路由

• pmndrs/drei

• react-virtuoso : 虚拟列表

• react-window : 虚拟列表

• react-virtualized : 虚拟列表

• TanStack virtual : 虚拟列表

脚手架

• ⭐ Next.js :Vercel - 支持SSR SSG 等众多功能开箱即用的React顶级框架, 使用人数众多

• ⭐ docusaurus : Facebook - 文档网站生成 , 使用人数超多

• ⭐ Gatsby

• ⭐ remix

• ⭐ Vite

• nextra : 基于Next.js 的文档网站生成

• alita : 阿里

• umi : 阿里

• ice : 阿里

• zhangyuang/ssr

• create-react-app : React 官方脚手架

• razzle

• astro : SSG 支持多个流行框架

• rakkasjs : 类 Next.js

• Blitz.js : 基于 Next.js 的一个全栈框架

• modern.js : 字节跳动 现代web工程体系 元框架套件

• ionic-framework : 将 web 套壳 到 安卓/ ios / electron

• capacitor : ionic 底层的框架 , 对 web 进行套壳 (ionic团队为了自主可控, 摆脱 cordova, 而做的框架)

• ⭐ cordova : 比较知名的框架, web 套壳到 安卓/ios/桌面 ( 经过测试 APK最小可以打包出 1M 多点 )

状态管理

• ⭐ valtio

• ⭐ zustand

• ⭐ mobx

• jotai

• redux

• recoil

• resso

• legend-state

表单库

• ⭐ react-hook-form : 高性能的表单验证库

• ⭐ react-final-form : 世界巨头都在用的 React 高性能表单库

• Formik

• Formily : 阿里

• react-form

• formsy-react

• uniforms

CSS in JS

• ⭐ emotion
• ⭐ styled-components
• jss
• griffel : 微软
• styils
• goober
• panda
• stitches
• dessert-box
• callstack/linaria
• atlassian-labs/compiled
• astroturfcss/astroturf
• yandex/reshadow
• threepointone/glamor
• FormidableLabs/radium