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

{%hackmd @HWDC/BJOE4qInR %}

>#### 》[議程介紹](https://hwdc.ithome.com.tw/2024/session-page/3206)
>#### 》[填寫議程滿意度問卷｜回饋建言給辛苦的講者](https://forms.gle/d5VnLRG81iSiDtwM9)

---

[TOC]

---

## https://ui.shadcn.com/

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

Headless UI 組件庫
[headLessWiki](https://zh.wikipedia.org/zh-tw/%E6%97%A0%E5%A4%B4%E8%AE%A1%E7%AE%97%E6%9C%BA)

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

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

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