V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dc2002007
V2EX  ›  React

react ui 组件库选择

  •  1
     
  •   dc2002007 · 325 天前 · 8086 次点击
    这是一个创建于 325 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    直到最近写移动版 H5 ,听别人推荐用 vant 4
    卧槽,这破玩意真垃圾
    dc2002007
        27
    dc2002007  
    OP
       325 天前
    antd 可以支持,我之前的项目用过,但是需要一些特殊的兼容性设置才可以
    dc2002007
        28
    dc2002007  
    OP
       325 天前
    @murmur vue 国际上不够流行,函数式 ui 编程更具灵活性
    dc2002007
        29
    dc2002007  
    OP
       325 天前
    @flmn mantine.dev 确实非常强大,不仅组件丰富,hook 也很丰富
    godleon
        30
    godleon  
       325 天前
    推荐 NEXTUI
    dc2002007
        31
    dc2002007  
    OP
       325 天前
    @vsitebon 请教:如何解决复杂组件的问题,比如说 DatetimeRangePicker ?
    murmur
        32
    murmur  
       325 天前
    @dc2002007 我给你发的不是 ui 组件库,是一个完整的管理后台模版,连页面都写好了,接数据就可以用的那种
    u3u
        33
    u3u  
       325 天前   ❤️ 2
    推荐 DaisyUI + NextUI + Radix Primitives ,前者是纯 CSS 样式库,但可以取代一些 JS 交互,非常适合纯服务器组件,对于 SEO 性能要求极高的页面(如静态首页、价格页等)需要尽可能少的使用 JS 。对于需要复杂交互的功能可以使用 NextUI 和 RadixUI ,如果确实需要它们中没有的组件可以再去 GitHub 找单独的组件。尽可能使用 TailwindCSS 集成友好的库,现在都流行 HeadlessUI ,方便使用 classNames 之类的属性定义组件各个部分的样式,可定制化强。另外推荐 https://tw-classed.vercel.apphttps://react-twc.vercel.app 去封装纯样式组件以便复用(类似于 Styled Components 的形式去写 Tailwind 样式组件)。还有 https://github.com/dcastil/tailwind-merge 可以方便覆盖合并 TailwindCSS 类
    popil1987
        34
    popil1987  
       325 天前
    后台的话看 refine 支持啥说明啥比较适合做后台,你这里面 antd 和 mui 是支持的
    zengxs
        35
    zengxs  
       325 天前   ❤️ 1
    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
        36
    fd9xr  
       325 天前
    mantine
    jianming348
        37
    jianming348  
       325 天前
    想要自由一点的话,推荐 material-ui ,前期可能会很麻烦,学习成本高一些。随着深入,逐渐根据自己的风格,形成属于自己的组件库。
    dc2002007
        38
    dc2002007  
    OP
       325 天前
    @u3u DaisyUI 我在项目深入使用过,非常优秀,轻量,感谢
    dc2002007
        39
    dc2002007  
    OP
       325 天前
    @murmur 我需要自己做一套高质量的管理后台,目的不是为了节约工作量,而是保证足够先进的情况下保证开发效率,所以这里应该考虑后台模板类型的方案,感谢回复。
    u3u
        40
    u3u  
       325 天前   ❤️ 2
    @dc2002007 #36 对了 NextUI 底层用的是 Adobe 开源的 React Aria 库,里面的组件很多很强大,而且还有实用的 Hooks 和工具函数,你可以看看,但样式都需要自己定义
    https://react-spectrum.adobe.com/react-aria
    https://react-spectrum.adobe.com/react-aria/DatePicker.html
    dc2002007
        41
    dc2002007  
    OP
       325 天前
    @u3u 感谢这是一个新的知识点
    mingqing
        42
    mingqing  
       325 天前
    从这里可以看出前端是多么“卷”呀,我也一直在找一个合适的 ui 框架适配自己的 grpc-kit 服务端。
    dc2002007
        43
    dc2002007  
    OP
       325 天前
    @mingqing 一起“卷”起来,顺便宣传一下你的 grpc-kit
    asong
        44
    asong  
       325 天前
    在这个帖子里,发现了很多有意思的库😄
    poorAshenOne
        45
    poorAshenOne  
       325 天前
    wow 这才像一个技术社区该有的亚子
    mongodb
        46
    mongodb  
       325 天前
    比起组件库,我更想问一下,react 下基于某个组件库形成的后台管理框架的选择有哪些?

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

    虽然打包起来的东西也没几样,一些 theme config ,全局 user store , 经典的路由,权限封装,request 封装,api proxy ,其实也就那几样。 但我感觉我找 vue 下的类似东西的时候总是选择更多一些(好坏不谈)。
    wanniwa
        47
    wanniwa  
       325 天前
    mark ,等一波贴主的最终选择
    sampeng
        48
    sampeng  
       324 天前
    组件是为需求服务的。。
    你这相当于我要一个超级牛逼一统天下的组件库。等于没要求。
    Manweill
        49
    Manweill  
       324 天前
    字节得 acro https://arco.design/ 感觉还是不错,vue/react 都有,组件也足够丰富,规范也齐全,并且带了 admin 模板,改改就能上
    dc2002007
        50
    dc2002007  
    OP
       324 天前
    @wanniwa nuxtui
    dc2002007
        51
    dc2002007  
    OP
       324 天前
    @wanniwa 我选了 nextui ,打错字了,我目前认为他足够先进,也有比较丰富的组件库支持
    duan602728596
        52
    duan602728596  
       323 天前
    如果是后台管理系统的话,推荐使用 antd ,不推荐 react-bootstrap 和 nextui 。
    你可以看一下 antd 的 form 和 react-bootstrap 、nextui 的 form 。antd 的 form 可以很容易实现非通用的复杂的表单组件。react-bootstrap 、nextui 更类似于通用的 UI 库,所以在后台的功能上可能会有一些缺失。
    至于 TailwindCSS ,它可以结合其他的 UI 库来使用,并没有冲突。
    dc2002007
        53
    dc2002007  
    OP
       323 天前
    @duan602728596 form 可以参考这里,nuxt 只是作为 react-aria 的一个包装器,实际上其拥有,非常强大的组件库背景,https://react-spectrum.adobe.com/react-aria/forms.html
    dc2002007
        54
    dc2002007  
    OP
       323 天前
    @duan602728596 我收回我刚才的话,实验证明,目前 aria 库里的组件在 nextui 里还无法直接引用,可能需要进行重复安装,例如 datepicker 、upload 等
    wanniwa
        55
    wanniwa  
       322 天前
    @dc2002007 #51 nextui 我没看到后台管理系统经常用到的菜单组件,你是怎么解决的如果遇到的话
    jaynsw
        56
    jaynsw  
       322 天前 via iPhone
    nextui 还缺乏很多组建 例如 date picker pill 什么的 暂时我还是用 mantine 将来等 nextui 差不多了再转
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2835 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 07:15 · PVG 15:15 · LAX 23:15 · JFK 02:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.