V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
gotoschool
V2EX  ›  程序员

mantine UI 库和 shadcn UI 库 选哪个?

  •  
  •   gotoschool · 20 小时 33 分钟前 · 1789 次点击
    纠结又犯了
    虽然都是 ai 写
    想使用一个库前后台一起梭哈

    或者 shadcnui 前台? mantine UI 后台?
    有更好的方案吗?总感觉身心疲惫啊
    20 条回复    2025-09-28 18:13:31 +08:00
    shiny
        1
    shiny  
       20 小时 2 分钟前 via iPhone   ❤️ 5
    shadcn ,因为有大量第三方 lib 可以用 shadcn li 安装,这是我搜集的库 https://netcup.notion.site/Dev-Startup-Kit-21854a23f8608011bc52f47dfd196ea0
    daimaosix
        2
    daimaosix  
       19 小时 56 分钟前
    shadcn AI 更友好
    Ketteiron
        3
    Ketteiron  
       19 小时 14 分钟前
    后台管理不推荐 shadcn 。
    虽然绝大部分组件都有对应的三方库实现或者可借鉴例子,实在不行可以手搓,但是到后期维护会相当烦人。
    不是对整个 shadcn 生态相当了解的话会碰到一个又一个坑,你有信心折腾的话就玩吧。
    Kilerd
        4
    Kilerd  
       19 小时 9 分钟前   ❤️ 3
    https://www.kilerd.me/you-need-shadcn-ui/

    这是我的心路历程。

    tldr 需要定制化用 shadcn , 不需要定制化/管理后台 用 mantine
    ultimate42
        5
    ultimate42  
       19 小时 6 分钟前
    我发现这些组件库都挺折腾人的其实..
    shadcn 每次用到项目里没有用到的新组件都要跑安装,文件部一堆的 import
    modal 或者 dialog ,没法在 onClose 里 reset 表单,得在一个动画结束的回调里操作
    我想用到一个 treeSelect ,无论是 shadcn 、mantine 、chakra 官方组件都没有,表格也是

    还有下面这些我这几天遇到的问题:
    react-hooks-form 无法直接用 reset()重置
    zod+RHF 想给一个 number 设置""的默认值
    react-table 给表头设置列宽
    react-table 没有设置数据总条数的字段、如果要在 pagination 里显示 共 xx 条 得自己维护一个字段

    可能是被国内的组件库惯坏了,折腾这些感觉很吃力
    gotoschool
        6
    gotoschool  
    OP
       18 小时 53 分钟前
    @shiny
    @daimaosix
    @Ketteiron
    @ultimate42
    感谢你们的回复


    @Kilerd 文章让我受益匪浅。
    XTTX
        7
    XTTX  
       10 小时 29 分钟前
    无脑推荐 shadcn, 一出来就用到现在。
    1.所有的坑别人都踩了上万遍了,AI 不能立刻解决就让它搜一下 github issue. 哪个库又没有坑?
    2.shadcn 让 composition 和 variant 这种写法成了主流,现在所有的组件库写法都大同小异。
    3.复杂的组合用法,你让 AI 撸一边 example ,写出 xx-rule.md, 新页面 @一下,咣叽一下就弄完了。
    4.supabase, cal.com 看别人代码库怎么用 shadcn
    5.shadcn 定义 ui 下限,风格统一起点,剩下的自己做。也可以理解它就是一个 UI layer wrapper. 复杂的逻辑都是靠的第三方库。好处就是极大降低了学习成本。
    linkopeneyes
        8
    linkopeneyes  
       10 小时 27 分钟前
    shadcn 表单要配合 react hooks form 而且 table 功能太简单了,如果用 @tanstack/react-table 的话又写起来太复杂了,有这个时间改这些的话,后台功能都写完了,最主要是 tailwind4.0 其实很激进做兼容的话,还要花时间
    susunus
        9
    susunus  
       10 小时 8 分钟前
    请教各位大佬,这些 ui 库和平时用的 antd 有啥区别
    yanguangs
        10
    yanguangs  
       9 小时 11 分钟前
    @susunus
    本质没啥区别,到了最后还是 javascript 跟 css

    一个新的轮子而已
    Leon6868
        11
    Leon6868  
       8 小时 41 分钟前
    @shiny #1 受益匪浅!
    Kilerd
        12
    Kilerd  
       8 小时 27 分钟前
    @gotoschool 对了,有一点特别重要,AI 时代下你的选择越广泛使用,AI 的补全能力就越强,可以在一些便宜的,context 短的 AI 上表现特别好。 基于这个点都应该选择 shadcn
    imherer
        13
    imherer  
       8 小时 16 分钟前
    @Kilerd #4 “在 Mantine 退出 Chart 系统时,我第一时间就跟进,把自己手搓的 Chart 系统给改了”

    是不是有笔误?
    Ketteiron
        14
    Ketteiron  
       7 小时 32 分钟前
    @linkopeneyes #8 shadcn 的定位是可深度定制的 UI 组件库,如果项目很多,或者项目迭代时间很长且需要高度定制化,还是划算的。但大部分后台项目没有多少预算资源,开发时间有限、开发人员能力有限,可能 deadline 到了还没折腾清楚,老实 antd 就行了。
    shadcn 上限无疑远超 antd/mantine 等组件库,前提是能玩明白,有时间玩明白。
    对于打算使用 shadcn 构造后台管理项目的人,我会建议他们先从一个简单的 tree-select/cascader 组件开始,看是否能顺畅地实现(无论是使用现成组件、copy 、手搓、AI)一个较为完整的 demo ,包括勾选策略(all/parent/child)、异步加载、多选、过滤/筛选/禁用/加载中、虚拟滚动、节点更新、级联选择。反正相关资源/实践社区里都有,AI 也能实现,但门槛还是挺高的。
    duan602728596
        15
    duan602728596  
       7 小时 15 分钟前
    不推荐 shadcn/ui ,后台还是老老实实 antd 吧。好不容易组件库帮你封装了一堆逻辑,你只是调用就好了,节约了开发时间。用 shadcn/ui 这是又走到以前用 bootstrap 的老路上了,还要进行二次、三次封装。
    Kilerd
        16
    Kilerd  
       5 小时 7 分钟前
    @imherer 输入法不太好,typo 有点多,看得懂就好 😁
    17681880207
        17
    17681880207  
       2 小时 3 分钟前
    我自己项目用的 heroui
    spider12
        18
    spider12  
       1 小时 41 分钟前
    antd 考虑不
    dumbass
        19
    dumbass  
       1 小时 9 分钟前
    sorry, I use element-plus.
    w797200
        20
    w797200  
       58 分钟前
    @Ketteiron 后台管理有没有推荐的?
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3000 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:12 · PVG 19:12 · LAX 04:12 · JFK 07:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.