鐵人檔案
現在已經有 shadcn/ui 這麼方便的元件，為什麼還要打造自己的 UI Kit？
這 30 天，我將以 shadcn/ui 為起點，使用 React、TypeScript、Tailwind CSS 等技術，從元件的拆解、客製化到設計規範，逐步建立自己的 Design System。
過程中也會從實作理解鍵盤操作、Focus、ARIA、色彩對比等 Accessibility 議題，思考如何在客製化元件的同時保留良好的無障礙體驗。
希望 30 天後，不只是「會使用元件」，而是真正打造出一套能持續擴充的 Accessible UI Kit!
Button 終於在 Day 10 畢業了~ 🎓接下來開始進入表單元件。 第一個要處理的是幾乎所有系統都會出現的： <input /> 乍看之下...
Day 11 完成了第一版 Input： <Input placeholder="請輸入 Email" /> Input 本身...
前兩天已經完成： Day 11 → Input Day 12 → Field / Label / Description / Error 今天繼續擴充 CUI...
前幾天完成了： Day 11 → Input Day 12 → Field Day 13 → Textarea 今天開始處理另一類表單元件： Checkbox...
前幾天我們完成了 Input、Textarea、Checkbox、Radio Group 與 Switch，今天繼續擴充表單元件，來做一個互動稍微複雜一些的元件...
前幾天我們陸續完成了： Input Field Textarea Checkbox Radio Group Switch Select 單獨看，每個元件都已...
前幾天，我們花了不少時間處理表單。 從 Input、Field、Textarea，一路做到 Checkbox、Radio、Switch、Select，最後在 D...
Day 17 做完 Badge、Alert 和 Empty State 之後，CUI 已經開始有能力表達「狀態」。 例如： <Badge variant=...
Day 18，我們完成了 CUI 的第一個 Table。 現在資料終於可以用真正具有語意的方式呈現： 姓名 申請項目 狀態...
前幾天，我們開始離開單一元件的世界。 Day 17 做了： Badge Alert Empty State Day 18 做了： Table Day 19...
