dc2002007
V2EX  ›  React

react ui 组件库选择

  •  1
     
  •   dc2002007 · Jan 2, 2024 · 14274 views
    This topic created in 1045 days ago, the information mentioned may be changed or developed.

    material-ui ,semi.design ,antd ,react-bootstrap 应该选哪个?你们认为哪个组件库更优秀

    Supplement 1  ·  Jan 2, 2024
    根据目前有的回复,基本分为三类
    1 、基于知名组件库的进一步包装,如 procomponent
    2 、知名组件库如 antd 之类
    3 、与 tailwindcss 配合使用的自由式组件库,如 nextui 、shadcn/ui 等
    我本人目前倾向于在 2 、3 之间选择,大家的帮忙分析一下
    Supplement 2  ·  Jan 3, 2024
    补充一下:
    1 、目的是为了保证先进性的同时具备开发效率
    2 、不会考虑现有的后台模板,我需要一些创新性
    3 、对组件的丰富度是有很大期待的,比如说具备 DatetimeRangePicker 这种强大的组件
    59 replies  •  2025-05-09 16:14:09 +08:00
    dc2002007
    dc2002007
    OP
    Jan 2, 2024
    1
    我打算写一个后台管理系统,现在不知道选哪个组件库,既漂亮、又全面、坑少、交互优秀
    SayHelloHi
    SayHelloHi
    Jan 2, 2024❤️1
    2
    wyhooo
    wyhooo
    Jan 2, 2024
    3
    procomponent 一把梭。
    XCFOX
    XCFOX
    Jan 2, 2024❤️1
    4
    NextUI:漂亮,精准,自定义程度高,细节拉满

    https://nextui.org/
    liuzhaowei55
    liuzhaowei55
    Jan 2, 2024 via Android❤️1
    5
    antd pro component 久经考验
    dc2002007
    dc2002007
    OP
    Jan 2, 2024
    6
    @XCFOX 这个确实漂亮,就是组件有些少,如果我要找一个 datepicker 我该怎么解决?
    dc2002007
    dc2002007
    OP
    Jan 2, 2024
    7
    @SayHelloHi 这个是不是可以和 daisyUI 结合起来玩
    Iamadog
    Iamadog
    Jan 2, 2024
    9
    这一套主题很好
    zsj1029
    zsj1029
    Jan 2, 2024
    10
    <input type="date">
    基础 html 已经自带了
    ui 控件太重,简单易用足够
    SiniJi
    SiniJi
    Jan 2, 2024
    11
    ProComponents 一把梭 +1
    https://github.com/ant-design/pro-components
    省事的一
    dc2002007
    dc2002007
    OP
    Jan 2, 2024
    13
    @zsj1029 此控件的 UI 因浏览器而异。在不支持的浏览器中,其会优雅地降级为简单的 <input type="text"> 控件。
    estk
    estk
    Jan 2, 2024 via iPhone
    14
    看 npm 安装量,选安装量最大的一般不会有问题
    IvanLi127
    IvanLi127
    Jan 2, 2024
    15
    如果做后台管理的话,那推荐 AntD
    如果做前台的话,推荐 daisyUI 。
    dassh
    dassh
    Jan 2, 2024
    16
    非专业前端,非常喜欢 shadcn 的风格,最近用 shadcn 把网站重构了一遍,还有:tailwind 真香
    CLMan
    CLMan
    Jan 2, 2024❤️1
    17
    写 Windows 桌面应用(electron,tauri,wails)可以用微软官方的 fluent ui:

    https://github.com/microsoft/fluentui
    leokun
    leokun
    Jan 2, 2024
    18
    你已经总结的很好了,用 3 可以做出更好看的效果,用 2 更方便,至于 2 和 3 都能涵盖的看看有没有更多推荐的
    Orangeee
    Orangeee
    Jan 2, 2024
    19
    https://github.com/woshiqiang1/awesome-javascript-ui-kit-library
    提供一个组件库合集参考,可以点进去对比下,优先选活跃的
    yemoluo
    yemoluo
    Jan 2, 2024❤️1
    20
    现在不支持 tailwindcss 的都可以抛弃了。哈哈,比如 antd
    flmn
    flmn
    Jan 2, 2024
    21
    看看 Mantine: https://mantine.dev/
    jlak
    jlak
    Jan 2, 2024 via iPhone❤️1
    22
    都被楼上推荐,复读一次,shadcn ,nextui ,headlessui
    paledream
    paledream
    Jan 3, 2024
    23
    后台管理系统,我一般会选择表单支持的比较好的 antd
    murmur
    murmur
    Jan 3, 2024
    24
    @dc2002007 管理后台其实换 vue 更好,vue-admin-template
    vsitebon
    vsitebon
    Jan 3, 2024
    25
    已经用 Shadcn 写了不下五个项目(大小项目都有),总结就是非常轻松
    twofox
    twofox
    Jan 3, 2024
    26
    原来 UI 库差距真的很大的,在用 vue 的时候用 element-ui ,用 react 的时候用 antd

    直到最近写移动版 H5 ,听别人推荐用 vant 4
    卧槽,这破玩意真垃圾
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    27
    antd 可以支持,我之前的项目用过,但是需要一些特殊的兼容性设置才可以
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    28
    @murmur vue 国际上不够流行,函数式 ui 编程更具灵活性
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    29
    @flmn mantine.dev 确实非常强大,不仅组件丰富,hook 也很丰富
    godleon
    godleon
    Jan 3, 2024
    30
    推荐 NEXTUI
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    31
    @vsitebon 请教:如何解决复杂组件的问题,比如说 DatetimeRangePicker ?
    murmur
    murmur
    Jan 3, 2024
    32
    @dc2002007 我给你发的不是 ui 组件库,是一个完整的管理后台模版,连页面都写好了,接数据就可以用的那种
    u3u
    u3u
    Jan 3, 2024❤️2
    33
    推荐 DaisyUI + NextUI + Radix Primitives ,前者是纯 CSS 样式库,但可以取代一些 JS 交互,非常适合纯服务器组件,对于 SEO 性能要求极高的页面(如静态首页、价格页等)需要尽可能少的使用 JS 。对于需要复杂交互的功能可以使用 NextUI 和 RadixUI ,如果确实需要它们中没有的组件可以再去 GitHub 找单独的组件。尽可能使用 TailwindCSS 集成友好的库,现在都流行 HeadlessUI ,方便使用 classNames 之类的属性定义组件各个部分的样式,可定制化强。另外推荐 https://tw-classed.vercel.app 或 https://react-twc.vercel.app 去封装纯样式组件以便复用(类似于 Styled Components 的形式去写 Tailwind 样式组件)。还有 https://github.com/dcastil/tailwind-merge 可以方便覆盖合并 TailwindCSS 类
    popil1987
    popil1987
    Jan 3, 2024
    34
    后台的话看 refine 支持啥说明啥比较适合做后台,你这里面 antd 和 mui 是支持的
    zengxs
    zengxs
    Jan 3, 2024❤️1
    35
    bestofjs 精选: https://bestofjs.org/projects?tags=component&tags=react&sort=total

    top 10 (按 star 排名):MUI 、Ant Design 、shadcn/ui 、Chakra UI 、Headless UI 、Mantine 、React bootstrap 、Blueprint 、NextUI 、Fluent UI
    fd9xr
    fd9xr
    Jan 3, 2024
    36
    mantine
    jianming348
    jianming348
    Jan 3, 2024
    37
    想要自由一点的话,推荐 material-ui ,前期可能会很麻烦,学习成本高一些。随着深入,逐渐根据自己的风格,形成属于自己的组件库。
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    38
    @u3u DaisyUI 我在项目深入使用过,非常优秀,轻量,感谢
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    39
    @murmur 我需要自己做一套高质量的管理后台,目的不是为了节约工作量,而是保证足够先进的情况下保证开发效率,所以这里应该考虑后台模板类型的方案,感谢回复。
    u3u
    u3u
    Jan 3, 2024❤️2
    40
    @dc2002007 #36 对了 NextUI 底层用的是 Adobe 开源的 React Aria 库,里面的组件很多很强大,而且还有实用的 Hooks 和工具函数,你可以看看,但样式都需要自己定义
    https://react-spectrum.adobe.com/react-aria
    https://react-spectrum.adobe.com/react-aria/DatePicker.html
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    41
    @u3u 感谢这是一个新的知识点
    mingqing
    mingqing
    Jan 3, 2024
    42
    从这里可以看出前端是多么“卷”呀,我也一直在找一个合适的 ui 框架适配自己的 grpc-kit 服务端。
    dc2002007
    dc2002007
    OP
    Jan 3, 2024
    43
    @mingqing 一起“卷”起来,顺便宣传一下你的 grpc-kit
    asong
    asong
    Jan 3, 2024
    44
    在这个帖子里,发现了很多有意思的库😄
    poorAshenOne
    poorAshenOne
    Jan 3, 2024
    45
    wow 这才像一个技术社区该有的亚子
    mongodb
    mongodb
    Jan 3, 2024
    46
    比起组件库,我更想问一下,react 下基于某个组件库形成的后台管理框架的选择有哪些?

    比如 vue-admin-template 使用 element 之于 vue ,或者 pro ant design 使用 antd 之于 react ,但我不知道是国外用户的使用习惯原因还是什么,我感觉这种打包好的“后台管理框架”,在 react 生态下我总是感觉不够多。

    虽然打包起来的东西也没几样,一些 theme config ,全局 user store , 经典的路由,权限封装,request 封装,api proxy ,其实也就那几样。 但我感觉我找 vue 下的类似东西的时候总是选择更多一些(好坏不谈)。
    wanniwa
    wanniwa
    Jan 3, 2024
    47
    mark ,等一波贴主的最终选择
    sampeng
    sampeng
    Jan 3, 2024
    48
    组件是为需求服务的。。
    你这相当于我要一个超级牛逼一统天下的组件库。等于没要求。
    Manweill
    Manweill
    Jan 3, 2024
    49
    字节得 acro https://arco.design/ 感觉还是不错,vue/react 都有,组件也足够丰富,规范也齐全,并且带了 admin 模板,改改就能上
    dc2002007
    dc2002007
    OP
    Jan 4, 2024
    50
    @wanniwa nuxtui
    dc2002007
    dc2002007
    OP
    Jan 4, 2024
    51
    @wanniwa 我选了 nextui ,打错字了,我目前认为他足够先进,也有比较丰富的组件库支持
    duan602728596
    duan602728596
    Jan 4, 2024
    52
    如果是后台管理系统的话,推荐使用 antd ,不推荐 react-bootstrap 和 nextui 。
    你可以看一下 antd 的 form 和 react-bootstrap 、nextui 的 form 。antd 的 form 可以很容易实现非通用的复杂的表单组件。react-bootstrap 、nextui 更类似于通用的 UI 库,所以在后台的功能上可能会有一些缺失。
    至于 TailwindCSS ,它可以结合其他的 UI 库来使用,并没有冲突。
    dc2002007
    dc2002007
    OP
    Jan 4, 2024
    53
    @duan602728596 form 可以参考这里,nuxt 只是作为 react-aria 的一个包装器,实际上其拥有,非常强大的组件库背景,https://react-spectrum.adobe.com/react-aria/forms.html
    dc2002007
    dc2002007
    OP
    Jan 4, 2024
    54
    @duan602728596 我收回我刚才的话,实验证明,目前 aria 库里的组件在 nextui 里还无法直接引用,可能需要进行重复安装,例如 datepicker 、upload 等
    wanniwa
    wanniwa
    Jan 5, 2024
    55
    @dc2002007 #51 nextui 我没看到后台管理系统经常用到的菜单组件,你是怎么解决的如果遇到的话
    jaynsw
    jaynsw
    Jan 6, 2024 via iPhone
    56
    nextui 还缺乏很多组建 例如 date picker pill 什么的 暂时我还是用 mantine 将来等 nextui 差不多了再转
    youyouzi
    youyouzi
    Nov 29, 2024
    57
    拒绝华丽花哨,antd + pro 一把梭,实践证明完全可以胜任工作当中绝大部分需求
    Bantes
    Bantes
    Jan 22, 2025
    58
    乱七八糟的 UI 库的确很好看,一个穿梭框,一个级联选择器就卡死了... 还得国内的这几个能用
    lizhien
    lizhien
    May 9, 2025
    59
    @wanniwa #55 我也想知道🤣
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2531 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 128ms · UTC 11:10 · PVG 19:10 · LAX 03:10 · JFK 06:10
    ♥ Do have faith in what you're doing.