Shadcn ui ～不再從零開始刻前端元件的生活～ - 王耀輝(Wind Wang)

歡迎來到 Hello World Dev Conf 共筆
共筆入口：https://hackmd.io/@HWDC/2024

》議程介紹

》填寫議程滿意度問卷｜回饋建言給辛苦的講者

---

• Shadcn ui ～不再從零開始刻前端元件的生活～ - 王耀輝(Wind Wang)
  • https://ui.shadcn.com/
  • 前言：痛點
  • 最大特色
    • CLI add button into project

---

https://ui.shadcn.com/

前言：痛點

1. 重複勞動
   2. 開發者經常需要為每個項目重新創造相似的UI 元件，不僅耗時還可能導致不一緻性
   3. UI 組件難客製
   4. UI 組件庫難升級
   5. 性能優化挑戰 (自定義組件缺乏優化)

Headless UI 組件庫
headLessWiki

解耦邏輯與樣式
提高可重用性
增加靈活性

HeadLess UI 示意圖

Radix UI 示意圖

https://www.radix-ui.com/

• 有狀態無樣式的元件庫
• 已包含狀態邏輯
• Tailwind 添加樣式
• 所有組建皆有預設樣式
• 組件多達50種
• 開箱即用

---

最大特色

• 不是組件庫
  • 不需要完整安裝整包
• 重複使用元件
  • 可以單獨使用
• 複製貼上
  • 程式碼貼到專案就能使用
• 程式碼是自己的
  • 可依照需求客製化

特性	傳統UI庫	ShadeCN
安裝方式	透過 npm 安裝整個庫	通常提供較小的模組化安裝方式
訂製性	有限，通常需要覆蓋樣式	高度可定制，易於進行樣式調整
大小	較大，可能包含不必要的元件	較小，根據需求選擇性安裝
學習曲線	通常需要花費較多時間學習和掌握	相對較平緩，易於上手
版本控制	依賴單一版本，更新頻繁時有風險	更靈活的版本管理，易於維護

CLI add button into project

npx shadcn@latest add button

cva -> Tailwind 其中一個套件

<Button variant="">

Figma 目前推薦使用版本
https://www.figma.com/community/file/1380975771508404648

• 開發從單線改為雙線同時進行
  • 過去等設計稿交件，前端才開始動工