UI組件庫提供了各種常見的 UI 元素，比如按鈕、輸入框、菜單等，只需要調用相應的組件并按照需求進行配置，就能夠快速構建出一個功能完善的 UI。

雖然市面上有許多不同的UI組件庫可供選擇，但在2023年底也并沒有出現一兩個明確的解決方案能夠適用于所有情況。因為不同的前端框架（例如React、Angular、Vue等）都有自己的優勢和適用場景，所以對應的UI組件庫也會有所不同。

本文就來簡要概述當前前端生態系統的樣式解決方案，并介紹一些常見和流行的UI庫。

UI 庫概述

CSS 框架和庫歷史

過去，網頁設計師需要手寫 CSS 樣式，這是一個曲折的過程。隨后，出現了一些CSS框架，如Blueprint、960 Grid System、YUI Grids等，它們引入了響應式網格和簡潔的UI元素，改變了網頁設計的方式。

然后，像 Twitter Bootstrap、Foundation 和 Bulma 這樣的巨頭出現了。它們提供了快速開發和一致的樣式，但也導致了一些問題，即網站開始感覺過于相似和統一。

為了解決這個問題，社區引入了一些方法論，例如BEM，用于注入獨特性和模塊化風格，以使網頁設計更加個性化和靈活。

總而言之，CSS框架和庫從最初只滿足布局需求，逐漸發展為提供全面的UI工具包。與此同時，涌現出更多的方法和技術，以實現更定制化和模塊化的樣式。

JavaScript框架改變了規則

隨著Angular、React和Vue等JavaScript框架的出現，開發人員需要一種更細粒度的方法來應對這些新的組件模型。傳統的CSS中最重要的特性之一是層疊，但對于這些新的框架來說，層疊機制卻帶來了一些問題。

為了解決這個問題，出現了一種新的解決方案，即CSS in JS。在React生態系統中，像Styled Components和Emotion這樣的庫變得非常流行，它們允許開發人員將樣式與組件作用域相關聯，從而解決了層疊問題。

原子化設計

原子化設計是一種組件化設計方法，由 Brad Frost 提出。它的核心思想是將 UI 元素分解成不同的層次，并將其視為原子、分子和有機體等不同的組件。

一個原子代表著最基本的、不可再分的元素，比如按鈕、輸入框等。一個分子則由多個原子組合而成，代表了相對復雜的組件，例如一個帶有圖片、文本和按鈕的卡片。而有機體則由多個分子組成，代表了更高級的 UI 元素，比如整個頁面或應用。

通過將 UI 設計拆解成組件的層次結構，開發人員和設計師可以更加系統地構建和管理 UI。這種方法提倡重用和組合，使得開發過程更高效，同時也使得 UI 更容易維護和擴展。

Tailwind CSS 等 CSS 框架采用了原子設計理念，提供了一系列的原子級樣式類，開發人員可以根據需要組合這些樣式類來構建 UI。這種方式使得樣式的復用和調整更加靈活和精確，并且可以減少冗余的樣式代碼。

真的需要 UI 庫嗎？

那我們真的需要一個 UI 組件庫嗎？答案可能是不需要。

在軟件開發中，很多時候都需要視情況而定，是否使用 UI 組件庫也用過視情況而定。如果希望能夠快速啟動項目并且不需要過多的自定義，那么使用一個成熟、易用的UI組件庫是一個不錯的選擇。但如果追求獨特的設計和完全自定義的外觀，UI 組件庫可能就不適合你。

UI 庫的分類

UI 庫可以分為以下類型：

• CSS的擴展：像Sass、Less、Tailwind和CSS Modules這樣的工具可以幫助開發者以自定義的方式為網頁添加樣式。它們提供了更強大和靈活的CSS功能，使開發者能夠更方便地管理和重用樣式。
• 行為庫/無樣式庫：如HeadlessUI、Radix 和 React Aria，它們專注于實現 UI 元素的行為邏輯，而不關注它們的具體樣式。可以使用這些庫來處理用戶交互、表單驗證、狀態管理等功能。
• 樣式系統：例如TailwindUI和DaisyUI，它們提供了一套內置的樣式和行為模板，使你可以快速構建具有統一外觀和行為的 UI。可以根據需要選擇和組合這些樣式模板，從而節省開發時間和工作量。
• 組件庫：像MUI、Ant Design和Mantine這樣的組件庫是獨立的實體，它們提供了一整套可重用的UI組件，如按鈕、輸入框、表格等。需要學習如何正確使用這些組件，并按照它們的文檔和示例進行開發。

什么是好的 UI 庫？

一個好的UI組件庫關鍵考慮因素如下：

• 一致性：UI 庫應該在整個應用程序中提供一致的UI元素、模式和行為。這有助于用戶快速理解如何使用 UI 庫。
• 靈活性：在保持一致性的同時，UI 庫也應該允許自定義和擴展，以適應不同應用程序的特定需求。模塊化和可自定義的組件是理想的選擇。
• 性能：UI 庫應該經過性能優化。文件大小、渲染速度和效率等因素很重要，尤其是在移動設備上。
• 可訪問性：遵循網絡可訪問性準則可以確保UI 庫適用于所有用戶。ARIA角色、語義化的HTML和鍵盤支持等是一些例子。
• 文檔：良好的文檔和示例使UI 庫更容易學習和實施。API參考、樣式指南和代碼示例有助于加速開發。
• 瀏覽器支持：UI 庫應該在現代瀏覽器中正常工作，并在舊版本瀏覽器中逐漸降級。漸進增強原則同樣適用于UI 庫。
• 社區：UI 庫背后的活躍社區提供討論論壇、插件和持續的維護。這有助于確保長期可用性。
• 直觀性：UI 庫應該與用戶的心智模型和期望相一致。利用自然映射、一致性、標準和熟悉的模式。
• 響應式：UI 庫應該適應不同的屏幕尺寸和輸入方式。以移動優先和流式布局為最佳實踐。

總之，一個好的 UI 庫在保持一致性和靈活性的同時，還要優化性能、可訪問性和設備支持。出色的文檔、活躍的社區和直觀的設計也非常重要。貫徹使用者體驗原則和啟發式原則有助于確保優質的結果。

熱門UI組件庫

React

由于其龐大的生態系統和普及度，React生態系統可能擁有最多的 UI 庫。

組件庫

• Material UI：一種基于Google的Material Design設計的流行實現。它提供了大量的組件和主題選項，并且已經存在很長時間，開發者需要按照他們的系統進行開發。
• Ant Design：一個可靠的組件庫選擇，被許多大型公司使用，如騰訊、百度、阿里巴巴等。支持所有現代瀏覽器、服務端渲染、esm甚至Electron。還有為Angular、Vue等框架提供的社區實現。它使用CSS-in-JS，因此可能會在運行時增加一些額外開銷，還有自己獨特的開發方式。
• ChakraUI：強調可訪問性（A11y），完全符合WAI-ARIA可訪問性標準，獲得了開源獎項，并有一個活躍的社區。它是構建可復用UI的優秀選擇，內置了hooks，并支持非常好的暗黑模式。這個團隊還開發了Zag.js，將UI作為狀態機處理。學習其API可能需要一些時間，切換到其他庫可能有一些困難。
• Mantine：另一個功能齊全的組件庫，具備良好的可訪問性，提供了100多個組件和hooks。Mantine完全基于TypeScript，可以覆蓋默認樣式。你需要學習如何使用它的函數和API來達到你的目標。
• Blueprint：一組用于構建桌面端數據密集型 UI 的組件。它特別適用于構建內部工具、儀表板和Electron應用程序。Blueprint在這個列表中是少數幾個帶有日期選擇器組件的庫之一。
• NextUI：不要與 React 元框架 Next.js 混淆，這個庫是使用 Tailwind CSS 構建的。它聲稱學習曲線很小。主題由tailwind.config.js文件處理，具備良好的可訪問性，并且所有組件都支持暗黑主題。只需使用不同的 Tailwind 類名即可覆蓋樣式。

Headless

• HeadlessUI：它提供了構建可訪問組件所需的核心功能，但沒有提供具體的樣式。它專門設計用于與Tailwind CSS框架配合使用，但也可以選擇使用其他CSS解決方案。它的目標是提供一種靈活的構建方式，讓開發者完全掌控組件的外觀和樣式。
• React Aria：由Adobe團隊開發的一個庫，它是一個完整的 HeadlessUI 解決方案。它不僅處理組件的行為和功能，還關注組件的可訪問性和國際化。該庫的API主要由一組鉤子組成，可以使用這些鉤子來構建自己的組件。雖然它還處于alpha版本，但它的目標是提供開箱即用的預定義組件。
• RadixUI：以前是一個 HeadlessUI 組件庫，但最近添加了主題和一些樣式。它以其出色的可訪問性和可組合性功能而聞名。使用 RadixUI 時，所有主題都通過CSS自定義屬性公開，這意味著可以輕松地用自己的CSS樣式覆蓋默認樣式。這個庫的目標是提供一種簡單而強大的方式來構建組件，同時允許自定義和擴展其外觀。

混合方法

• ShadCN/UI：它提供了一種不同于其他庫的開發方法。不需要通過npm安裝組件或整個庫，而是將代碼直接復制粘貼到自己的代碼庫中。這樣做的目的是讓開發者完全擁有組件，并將設計和實現分離。它使用 Tailwind 進行構建，并提供了一個CLI工具，可以生成組件代碼并調整tailwind.config.js文件。
• KumaUI：它使用零運行時CSS-in-JS技術創建 headless UI組件，提供了很大的靈活性。它在設計上受到了其他零運行時CSS-in-JS解決方案（如PandaCSS、Vanilla Extract和Linaria）以及Styled System、ChakraUI和Native Base的啟發。

Vue

Vue生態系統中，很多庫的文檔都是用中文而不是英文編寫的。

組件庫

• Quasar：它本身不被視為一個庫，而更像是一個框架。它是基于Vue的，但它的理念是可以使用它來創建網站和應用，這意味著它使用CLI為Web、移動端、桌面端、SPA（單頁應用）、SSR（服務端渲染）等生成不同的輸出。
• Vuetify：聲稱自己是一個不需要設計技能的開源UI庫，擁有精心制作的Vue組件。它像大多數成熟的組件庫一樣，功能齊全。同樣，需要了解該庫的API，并被“鎖定”到它們的組件組合模型中才能使用。
• Element Plus：正如官網所述，Element Plus是“面向設計師和開發者的基于Vue 3的組件庫”。不確定它與其他庫有何不同，但它提供了相同種類的組件選擇。它擁有超過2萬顆star和每周超過15萬次下載量，這表明它很受歡迎。
• VueMaterial：顧名思義，VueMaterial是Material Design的Vue實現。文檔簡單、輕量、響應式，具有易于使用的API，聽起來像是一個完善的組件庫所具備的優點。

Angular

Angular 正在經歷一種復興，并且仍有很多公司在使用它。

組件庫

• Angular Material：和其他各種框架的Material實現一樣。它們都自稱是高質量、多功能的。
• PrimeNG：這個集合中有一個很好的地方是可以選擇基礎主題。可以從其他流行的設計框架（如Material Design、Bootstrap、Soho、Fluent、Nano等）中選擇設計選項。這是通過一個可視化編輯器完成的，它是主題選項的一部分。PrimeNG還提供了一個Figma UI工具包、現成的模板和一個SASS API。
• NG Bootstrap：它是Angular與Twitter Bootstrap（4.0）的綁定。但需要注意的是，開發者需要同時學習庫的API以及掌握Bootstrap的類名的使用方式。

Svelte

Svelte 內置了很多處理樣式和動畫的功能。對于樣式，只需在組件文件中使用style標簽，并且它的作用域僅限于該組件。此外，Svelte還具有處理緩動和彈簧動畫的motion模型，這對開發體驗來說非常棒。

Headless 組件

• Svelte Headless UI：完全移植自React Headless UI，與SvelteKit（Svelte元框架）兼容。

組件庫

• SvelteUI：一個功能齊全的組件庫，使用TypeScript編寫。它包含了50多個高度可自定義的組件，涵蓋了在一個組件庫中常見的布局、操作、輸入和排版等各種元素。
• Smelte：一個基于Svelte和Tailwind CSS的UI框架，符合Material Design規范。它提供了一個Rollup插件，可以在其中定義主題、顏色等樣式。只需要導入庫的CSS，就可以開始使用它了！這個庫還提供了一些在其他庫中較為少見的組件，例如日期選擇器、導航抽屜和樹視圖。

Solid

SolidJS 是一個相對較新的框架，與上述大多數框架相比存在時間較短。它是你下一個項目的一個可靠選擇。

Headless 組件

• Kobalte：一個未經樣式化的、可訪問的、可組合的UI工具包，用于構建設計系統基礎。受到AriaKit、RadixUI、React Araia和Zag的啟發。從官方文檔來看，它看起來很像Radix的實現。注意：仍處于測試版。

組件庫

• SUID：SolidJS的MUI移植版本。正如文檔中所說“相同的API，相同的設計”，如果來自React并且使用過MUI，這會讓你感到賓至如歸。同樣的注意事項也適用。它們有一個很酷的工具，可以將React代碼轉換成Solid代碼。
• Solid Bootstrap：顧名思義，這是一個在SolidJS之上的Bootstrap包裝器。不同之處在于，你需要使用props（例如variant）而不是類來操作大部分內容。還有一個“Core”版本，其中包含了 headless 實現的組件。

Qwik

作為本文最新的框架，Qwik生態系統仍然很新。因此，在這里的選項相對較少。但可以利用React生態系統在Qwik應用中使用組件庫。

Headless 組件

• QwikUI：雖然仍處于測試版，但QwikUI提供了一個 headless 套件，用于構建完全兼容WAI-ARIA組件。現在的beta版本中有下拉框、標簽頁和手風琴。他們還制定了提示工具、選擇器和彈出窗口的草案。該團隊還在開發自己的ShadCN/UI方法，代號“Fluffy”。

跨框架

最近也出現了一些使用CSS工具鏈構建的獨立庫：

• ArkUI：使用狀態機為React、Vue和SolidJS提供 headless 可訪問組件。由Zag.js和Chakra UI的創建者制作，這似乎是這兩項產品之間的折中方案。
• Flowbite：構建在Tailwind之上的組件，不僅適用于JavaScript框架，如React、Qwik、Vue、Svelte、Angular和SolidJS；還適用于流行的元框架，如Astro、Next.js、Remix、Nuxt、Meteor；以及非JS框架，如Laravel、Symfony、Ruby on Rails、Pheonix、Django和Flask。

總結

如上所述，有許多選擇可供我們選擇。選擇正確的解決方案可能會大大提高工作效率，而錯誤的選擇則可能導致一系列問題。

因此，在做出選擇時要謹慎。希望這篇文章能夠給你一個清晰的概述，讓你認真思考是否需要使用庫，或者是否值得投入精力來開發自己的解決方案。這不僅關乎產品團隊，也關乎用戶的體驗。

記住，用戶并不在意你使用的是哪種解決方案。選擇適合項目和需求的解決方案最為重要。

參考：https://www.builder.io/blog/25-plus-ui-component-libraries。