鐵人檔案
現在已經有 shadcn/ui 這麼方便的元件，為什麼還要打造自己的 UI Kit？
這 30 天，我將以 shadcn/ui 為起點，使用 React、TypeScript、Tailwind CSS 等技術，從元件的拆解、客製化到設計規範，逐步建立自己的 Design System。
過程中也會從實作理解鍵盤操作、Focus、ARIA、色彩對比等 Accessibility 議題，思考如何在客製化元件的同時保留良好的無障礙體驗。
希望 30 天後，不只是「會使用元件」，而是真正打造出一套能持續擴充的 Accessible UI Kit!
現在前端已經有非常多成熟的 UI Library。 從 Button、Input、Select，到 Dialog、Tabs 等複雜的互動元件，很多時候不需要從零...
Day 1 提到，希望把不同系統中重複出現的 UI 整理成共用元件，也希望把 Accessibility 從開發後期的檢查項目，往前移到 Component 的...
Day 2 建好了 React + TypeScript + Vite 的基本環境在開始第一個component之前---shadcn/ui 到底是什麼？ 開官...
Day 2 建好了 Vite + React + TypeScript 專案，Day 3 也了解了 shadcn/ui 和一般 Component Librar...
Day 4 拆開第一顆 shadcn/ui Button 時，可以看到不少這樣的 Class： bg-primary text-primary-foregrou...
一開始規劃這套 UI Kit 時，技術清單裡其實有 Tailwind CSS + SCSS React Component 使用 Tailwind CSS L...
前幾天已經把 shadcn/ui 的 Button 拆開來看過，也建立了自己的 Design Tokens。到了今天，終於可以開始動第一個真正的元件：Butto...
昨天終於完成了第一顆自己的 Button，也定義了 variant、size 和 data-cui-* Component Contract。今天先不急著做第二...
前面幾天把 Button 的 Variant、Size、Focus 等基礎規則整理好後，今天來加入另一個 UI 中很常見的元素：Icon 像這樣: <Bu...
Day 10｜Button v1 完成：Shape、Loading 與 Component API 前幾天一路從 shadcn/ui 的 Button 開始拆解...
