iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
自我挑戰組

30 天打造 Accessible UI Kit:從 shadcn/ui 到自己的 Design System 系列

現在已經有 shadcn/ui 這麼方便的元件,為什麼還要打造自己的 UI Kit?

這 30 天,我將以 shadcn/ui 為起點,使用 React、TypeScript、Tailwind CSS 等技術,從元件的拆解、客製化到設計規範,逐步建立自己的 Design System。

過程中也會從實作理解鍵盤操作、Focus、ARIA、色彩對比等 Accessibility 議題,思考如何在客製化元件的同時保留良好的無障礙體驗。

希望 30 天後,不只是「會使用元件」,而是真正打造出一套能持續擴充的 Accessible UI Kit!

參賽天數 3 天 | 共 3 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1: 都有 shadcn/ui 了,為什麼還要做自己的 UI Kit?

現在前端已經有非常多成熟的 UI Library。 從 Button、Input、Select,到 Dialog、Tabs 等複雜的互動元件,很多時候不需要從零...

2026-09-15 ‧ 由 juicy44528 分享
DAY 2

Day2: 開工!用 Vite + React + TypeScript 建立 UI Kit

Day 1 提到,希望把不同系統中重複出現的 UI 整理成共用元件,也希望把 Accessibility 從開發後期的檢查項目,往前移到 Component 的...

2026-09-16 ‧ 由 juicy44528 分享
DAY 3

Day 3: shadcn/ui 到底是什麼?它和一般元件庫有什麼不同?

Day 2 建好了 React + TypeScript + Vite 的基本環境在開始第一個component之前---shadcn/ui 到底是什麼? 開官...

2026-09-17 ‧ 由 juicy44528 分享