在做前端網頁開發時，經常會遇到一些預算不充足、整體規模較大或是客製化程度要求較低的專案，這個時候從頭開始讓設計師設計一套設計系統 (Design System) 並根據它來封裝出一整套可以重複使用的組件庫 (UI Kit, UI Library) 並不是一個很好的作法，既浪費人力又浪費時間。

這個時候我們可以選擇使用網路上現成的各種組件庫來直接套用，如此一來不僅節省了設計和封裝的工作量，相同時間內完成的效果也可以比全部自己重新做來的好，因為現成的組件庫往往幫我們考慮到了那些我們沒想到的邊界情況 (Edge Case) 或是一些增進 UX 的小細節。

今天這篇文章就整理了各種好用的 React 組件庫，讓大家在開始一個新的專案時能夠根據風格和功能需求快速選擇出適合的組件庫。

Ant Design

Ant Design 是 Ant Group 開發及維護的一套開源 React 組件庫。

官方網站 https://ant.design/

GitHub Homepage https://github.com/ant-design/ant-design

Figma Template https://www.figma.com/community/file/1098063048947321053/Ant-Design

安裝

yarn add antd

pnpm install antd

引入樣式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Supabase UI

Supabase UI 是 Supabase 官方的 React 組件庫，被使用在 Supabase 服務的網頁中。

官方網站 https://ui.supabase.io/

GitHub Homepage https://github.com/supabase/ui

Figma Template https://www.figma.com/community/file/1048935165760060357/Supabese-UI

Base Web

Base Web 是 Uber 公司開發及維護的 React 組件庫。

官方網站 https://baseweb.design/

GitHub Homepage https://github.com/uber/baseweb

Geist

Geist 是基於 Vercel 的網站設計整理出來的非官方開源 React 組件庫，用過 Vercel 的開發者一定對這套 UI 風格非常熟悉吧！

官方網站 https://geist-ui.dev/en-us

GitHub Homepage https://github.com/geist-org/geist-ui

Radix

官方網站 https://www.radix-ui.com/

GitHub Homepage https://github.com/radix-ui

Figma Template https://www.figma.com/community/file/1055912623219285224/Radix-%26-TailwindCSS-UI-Components

Horizon UI

官方網站 https://horizon-ui.com

GitHub Homepage https://github.com/horizon-ui/horizon-ui-chakra

Figma Template https://www.figma.com/community/file/1098131983383434513/Horizon-UI---Trendiest-Open-Source-Admin-Template

Rsuite

官方網站 https://rsuitejs.com/

GitHub Homepage https://github.com/rsuite/rsuite

Figma Template https://www.figma.com/community/file/994524751550165025/React-Suite

安裝

yarn add rsuite

pnpm install rsuite

import 'rsuite/styles/index.less'; // or 'rsuite/dist/rsuite.min.css'

Mantine

官方網站 https://mantine.dev/

GitHub Homepage https://github.com/mantinedev/mantine/