shadcn/ui

以可複製原始碼方式提供元件的 React 介面資源。

  • 元件
前往 shadcn/ui 官方網站

這是什麼

shadcn/ui 提供可加入專案的元件原始碼與文件,而不是要求所有元件都透過單一封裝套件使用。

為何推薦

能直接閱讀並調整元件程式碼,適合需要配合現有樣式與可及性要求的專案。複製後仍要把鍵盤、焦點與表單行為納入自己的測試。

適合誰

使用 React 建立產品介面,且希望掌握元件原始碼與樣式細節的開發者。

常用情境

  • 為新專案建立一致的元件基礎
  • 調整元件以符合既有設計 token
  • 從文件理解對話框、表單等互動模式

21st.dev

收集可作為產品介面起點的元件與實作素材。

  • components
  • react
  • ui

Component Gallery

用來瀏覽與比較設計系統元件樣式的參考網站。

  • components
  • design-system
  • reference

Cursify

探索自訂游標與指標互動效果的前端素材網站。

  • cursor
  • css
  • interaction