Yuanlin Lin

Blog

那些好看又好用的 React 組件庫大集合 (含 Figma 模板)

Yuanlin Lin 林沅霖

2022-05-04

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

從頭開始設計 Design System,光是一個 Button 可能就要花上好幾天

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

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

note:這篇文章將會持續更新,只要我又找到新的組件庫就會把他寫進來,實際用過各個組件庫以後也會把個人感受和注意事項補充上來。如果有遺漏或是想補充的讀者也歡迎留言告訴我喔!

Ant Design

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

Ant Design

官方網站 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 服務的網頁中。

Supabase UI

官方網站 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 組件庫。

Base Web

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

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

Geist

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

Geist

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

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

Radix

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

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

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

Mantine

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

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

author-avatar

關於作者

Yuanlin Lin 林沅霖

台灣桃園人,目前就讀浙江大學,主修計算機科學與技術,同時兼職外包全端開發工程師,熱愛產品設計與軟體開發。

閱讀更多

回部落格首頁