shadcn-ui ── 可能是改變遊戲規則的 UI Library

前言

只看名字，可能會以為又一個 UI library。但這次不一樣

他是一個 Cli，可以透過指令產出 UI，直接在你專案目錄產生相應的組件原始碼
若有客制化的需求，再自行修改所產生的原始碼

不論是後台系統、需要高度客制化 UI 的對外服務，都很適合使用。而且是 MIT 授權

2023/3/14 釋出，截至發文(2023/07/23)時間，短短 4 個月已有 25K Star！

關於他的特色

• 底層封裝 Radix UI
• 使用 tailwind
• 所有組件原始碼皆存在於你的專案，而非 node_modules。易於客制化
• 搭配主流開源套件，如form是使用 react-hook-form；table 是 tanstack/table
• 提供 Figma
• MIT 授權
• 支援 React 主流框架，如 Next.Js、Remix

可以想像的使用情境

一些稍複雜但不難卻又很常用的組件如 Dialog、date-range-picker
若專案本身沒使用 UI libaray，為了他導入卻只用其中 1 個組件，相信沒人願意接受
就算接受了，還要調整成現有風格亦不一定好調整
自己全新開發又嫌麻煩，畢竟要寫到像套件能泛用各種情境還真需要不少功夫
就算不考慮泛用性，再怎麼快也要耗費1、2H開發 & 測試

而透過 shadcn-ui 幫你產生
不但保持專案的乾淨，又能快速解決需求
最後再調整 Cli 產出的 tailwind 以符合現有風格。甚至可能也不必調了，因為直接吃專案裡的 tailwind.config

幾乎無痛接入既有專案！

當然唯一的限制就是專案要有使用 tailwind 了

大部份的 UI Library 整合 tailwind，都是把 tailwind 當輔助，調整 tailwind.config 吃 UI Library 的設定
而 shadcn-ui 有點像是 tailwind 為主，UI Library 為輔

難怪才釋出不久，Star 就衝上 25K
可能也有人會懷疑 npm 下載量約1萬初(2023/07/23的數字)，真的熱門嗎？

別忘了他只是 Cli，通常在 global 安裝一次後，直到你更新 node 版本或環境重灌，才會再次安裝

也就是所有的 CICD 都不會一直安裝他！
甚至你不安裝 Cli，也可以在官網手動複製所須組件的原始碼
就算未來 Star 數衝破 100K，自然下載量一定仍明顯慘輸給其他 UI library 了

推薦給有使用 tailwind 的專案！