2023/2024 年 React 组件库 与 相关库 推荐
2023/2024 年 React 组件库 与 相关库 推荐
展开目录
精挑细选的 React 库 , 质量非常的高. 建议每一个都点进去官网看一看.
(知乎不支持表格中的超链接 , 只能用这种普通文本了)
这篇文章会一直持续更新下去....
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
- tamagui
基于 TailwindCSS 的组件库
所有前端框架都适用, 可以完成绝大部分的需求
有一些是原生 Tailwind 大号代码块, 直接复制就可以用在项目中.
- daisyui
- mambaui
- tailblocks
- tailwindcomponents
- flowbite
- lofiui
- konsta
- Tailwind-Elements
- tail-kit
- vechaiui
- flowbite
- Merakiui
基于 WebComponents 的组件库
众所周知 WebComponents 组件 适用于任意前端框架
组件模块
- ⭐ 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 多点 )
状态管理
表单库
- ⭐ react-hook-form : 高性能的表单验证库
- ⭐ react-final-form : 世界巨头都在用的 React 高性能表单库
- Formik
- Formily : 阿里
- react-form
- formsy-react
- uniforms
CSS in JS
编辑于 2023-10-05 09:19・IP 属地山西
漫思
