在做前端網頁開發時,經常會遇到一些預算不充足、整體規模較大或是客製化程度要求較低的專案,這個時候從頭開始讓設計師設計一套設計系統 (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 服務的網頁中。
GitHub Homepage https://github.com/supabase/ui
Figma Template https://www.figma.com/community/file/1048935165760060357/Supabese-UI
Base Web
Base Web 是 Uber 公司開發及維護的 React 組件庫。
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
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
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/