2022年面向前端開(kāi)發(fā)人員的9個(gè)最佳UI組件庫(kù)/框架

原文鏈接：https://dev.to/aviyel/top-9-best-ui-component-librariesframeworks-in-2022-for-frontend-developers-b48

作者：Pramit Marattha

如有翻譯不準(zhǔn)，請(qǐng)多指正。

介紹

如果你參與Web開(kāi)發(fā)，很可能聽(tīng)說(shuō)過(guò)UI組件庫(kù)和CSS框架。UI組件庫(kù)是一組預(yù)制樣式（如字體、組件或顏色），可用于快速構(gòu)建網(wǎng)站。這些UI組件使開(kāi)發(fā)人員能夠創(chuàng)建解決常見(jiàn)問(wèn)題的代碼——例如，創(chuàng)建適用于所有設(shè)備的按鈕和組件，或添加已經(jīng)為你設(shè)計(jì)的菜單和預(yù)構(gòu)建元素，這樣你就不必從頭開(kāi)始構(gòu)建它們。在本文中，我們將探索在構(gòu)建下一個(gè)項(xiàng)目時(shí)使用UI組件庫(kù)或CSS框架的主要好處，然后我們將介紹一些目前市場(chǎng)上免費(fèi)選項(xiàng)的絕佳選擇！

為什么要使用UI組件庫(kù)？

有許多UI組件庫(kù)可供下載，每個(gè)庫(kù)都有自己的優(yōu)勢(shì)和劣勢(shì)。一些庫(kù)比其他庫(kù)更方便初學(xué)者，有些庫(kù)原型更快，有些具有更可定制的組件等。下面我們將更詳細(xì)地介紹使用UI組件庫(kù)的好處，但總的來(lái)說(shuō)，它有很多原因可以帶來(lái)好處：

用戶友好：當(dāng)你開(kāi)始使用庫(kù)時(shí)，你不需要從頭開(kāi)始了解樣式和創(chuàng)建元素的所有來(lái)點(diǎn)——只需使用庫(kù)中已有的內(nèi)容！如果只是在學(xué)習(xí)如何編寫(xiě)代碼，并希望一些簡(jiǎn)單的東西來(lái)快速完成工作，這可能會(huì)特別有用。

可自定義組件：你可以更改組件某些部分的每個(gè)方面，而無(wú)需觸摸其他部分。例如，如果你想更改應(yīng)用程序中所有按鈕的配色方案或字體大小，只需要更改代碼中的一個(gè)變量，而不必為每個(gè)按鈕手動(dòng)更改。

更快的原型：你可以在開(kāi)始實(shí)際項(xiàng)目之前使用現(xiàn)成的組件創(chuàng)建幾個(gè)功能正常的原型。原型允許你在投入太多時(shí)間之前測(cè)試不同的設(shè)計(jì)，并查看哪種設(shè)計(jì)效果最佳。如果你的客戶或老板喜歡他們所看到的，但希望進(jìn)行一些小的更改，這可以通過(guò)實(shí)時(shí)進(jìn)行調(diào)整來(lái)快速完成，而不是每次出錯(cuò)時(shí)都必須從頭開(kāi)始（就像根本沒(méi)有使用原型一樣）。

節(jié)省時(shí)間：如果你想建立一個(gè)新網(wǎng)站，需要一些時(shí)間來(lái)自己創(chuàng)建所有必要的元素——這就是為什么大多數(shù)人使用現(xiàn)成的解決方案。UI組件庫(kù)為您節(jié)省時(shí)間，因?yàn)樗性囟家延蓪＜覄?chuàng)建和測(cè)試。如果缺少元素，你可以隨時(shí)使用自定義代碼擴(kuò)展庫(kù)的功能，甚至可以創(chuàng)建自己的版本。

跨多個(gè)平臺(tái)的兼容性：對(duì)于許多網(wǎng)站來(lái)說(shuō)，僅僅在臺(tái)式計(jì)算機(jī)上看起來(lái)還不夠——今天的用戶希望網(wǎng)站在移動(dòng)設(shè)備和PC上都能正常工作。使用UI組件庫(kù)，這應(yīng)該不成問(wèn)題：開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中已經(jīng)處理了這一方面，因此無(wú)論你的設(shè)備或?yàn)g覽器選擇如何，所有訪問(wèn)者都將獲得愉快的體驗(yàn)。

無(wú)論UI組件庫(kù)有多有用，在決定使用UI組件庫(kù)之前，它仍然會(huì)附帶一些你需要了解的注意事項(xiàng)：

• 一些UI庫(kù)的自定義選項(xiàng)比其他庫(kù)少，這意味著它們可能不夠靈活，以滿足你的需求。

• 如果每個(gè)人都使用同一個(gè)庫(kù)，你的網(wǎng)站可能會(huì)與使用同一庫(kù)的其他人相似——特別是如果你使用的是按鈕或表單等常見(jiàn)元素。

• 如果你對(duì)如何使用特定組件有疑問(wèn)或需要自定義它的幫助，創(chuàng)建者可能沒(méi)有官方支持渠道，如文檔或教程。

誰(shuí)是UI組件庫(kù)的目標(biāo)用戶？

如果你是剛剛起步的開(kāi)發(fā)人員，可能正在尋找一個(gè)庫(kù)，為你提供從頭開(kāi)始構(gòu)建整個(gè)用戶界面所需的一切。在這種情況下，重要的是你的組件內(nèi)置了所有樣式和交互，這樣你就可以專注于編寫(xiě)代碼，而不是擔(dān)心自己編寫(xiě)任何樣式。這就是為什么在本文中，我們列出了當(dāng)今市場(chǎng)上一些最好的開(kāi)源和免費(fèi)的CSS框架和組件庫(kù)。

1）Bootstrap

Bootstrap是一個(gè)免費(fèi)和開(kāi)源的前端網(wǎng)頁(yè)設(shè)計(jì)框架，用于制作漂亮的Web應(yīng)用程序。它包含排版、表單和按鈕導(dǎo)航等接口組件的模板，還包括可選的JavaScript擴(kuò)展。與許多其他框架不同，它關(guān)注前端開(kāi)發(fā)，以便在網(wǎng)絡(luò)上開(kāi)發(fā)響應(yīng)靈敏的移動(dòng)優(yōu)先項(xiàng)目。

2010年，Twitter設(shè)計(jì)師MarkOtto和JacobThornton創(chuàng)建了Bootstrap，作為鼓勵(lì)內(nèi)部工具一致性的框架。在此之前，每個(gè)團(tuán)隊(duì)都有自己的一套香草HTML/CSS模板來(lái)代替標(biāo)準(zhǔn)設(shè)計(jì)語(yǔ)言——這產(chǎn)生了不一致之處，使公司的開(kāi)發(fā)人員難以高效地構(gòu)建新產(chǎn)品。2011年8月，該框架通過(guò)Twitter和GitHub頁(yè)面發(fā)布。到目前為止，它已被下載超過(guò)6.02億次，并被超過(guò)26%的世界頂級(jí)網(wǎng)站使用。它已成為當(dāng)今最受歡迎的前端框架。

為什么要使用Bootstrap？

Bootstrap為你提供響應(yīng)式網(wǎng)格系統(tǒng)，可用于快速創(chuàng)建布局。它還有大量的CSS樣式集合，可用于為你的網(wǎng)站設(shè)置樣式。這節(jié)省了大量時(shí)間，因?yàn)樗试S避免從頭開(kāi)始編寫(xiě)自己的樣式。Bootstrap使開(kāi)發(fā)人員可以輕松地將下拉菜單、導(dǎo)航菜單、警報(bào)和其他組件等功能直接添加到他們的網(wǎng)站/應(yīng)用程序中。

Bootstrap庫(kù)可以使用npm安裝：

或使用yarn：

2）Semantic UI

Semantic UI是用于開(kāi)發(fā)美觀、響應(yīng)靈敏和直觀的Web應(yīng)用程序的框架。它提供了一組預(yù)構(gòu)建的UI組件，可用于任何Web項(xiàng)目。它建立在普通CSS和jquery之上，為你的應(yīng)用程序提供了干凈一致的基礎(chǔ)。

Semantic UI是一個(gè)免費(fèi)的開(kāi)源庫(kù)，可幫助你自信地構(gòu)建用戶界面。它提供了3000多個(gè)主題變量和50多個(gè)UI組件，每個(gè)組件都經(jīng)過(guò)精心設(shè)計(jì)，看起來(lái)很漂亮，工作直觀。它旨在成為你項(xiàng)目的直觀、可訪問(wèn)和靈活的起點(diǎn)。它包含了你可以開(kāi)箱即用的功能，并且非常易于定制。到目前為止，它已被下載超過(guò)600萬(wàn)次，擁有大約5萬(wàn)顆GitHub星。

語(yǔ)義用戶界面庫(kù)可以使用npm安裝：

或使用yarn：

3）TailwindCSS

TailwindCSS是用于快速Web開(kāi)發(fā)的實(shí)用程序優(yōu)先CSS框架。Tailwind的目的是幫助你構(gòu)建快速、模塊化和響應(yīng)迅速的網(wǎng)站，幫助你縮短開(kāi)發(fā)時(shí)間并編寫(xiě)更干凈、更易于維護(hù)的代碼。

Tailwind提供了一系列模塊化混音和功能，你可以在自己的樣式表中使用。這些將允許你只需幾行代碼即可快速創(chuàng)建復(fù)雜的CSS模式，如媒體查詢或跨瀏覽器兼容性聲明。它的設(shè)計(jì)旨在幫助你專注于最重要的事情：開(kāi)發(fā)您的產(chǎn)品，而不是編寫(xiě)代碼。Tailwind通過(guò)處理每個(gè)項(xiàng)目所需的所有重復(fù)樣式規(guī)則，幫助你編寫(xiě)更少的CSS。其內(nèi)置網(wǎng)格系統(tǒng)可以輕松構(gòu)建你的網(wǎng)站，其預(yù)制組件可避免你在每次構(gòu)建新網(wǎng)站或頁(yè)面時(shí)都不必從頭開(kāi)始。

Tailwind還包括一組默認(rèn)響應(yīng)的內(nèi)置實(shí)用程序類，這意味著它們將根據(jù)顯示的設(shè)備大小自動(dòng)調(diào)整外觀。

Tailwind由AdamWathan創(chuàng)建。它已被Facebook、Google和Airbnb等公司以及一些世界領(lǐng)先機(jī)構(gòu)用于生產(chǎn)。到目前為止，它已被下載超過(guò)1.73億次，擁有大約6萬(wàn)顆GitHub星。

通過(guò)npm安裝tailwindcss

或使用yarn：

初始化你的tailwind.config.js文件

配置模板路徑

將路徑添加到tailwind.config.js文件中的所有模板文件中。

添加Tailwind指令

將Tailwind每個(gè)圖層的@tailwind指令添加到你的主CSS中。

初始化TailwindCLI構(gòu)建過(guò)程

運(yùn)行CLI工具掃描你的模板文件以查找類并構(gòu)建CSS。

開(kāi)始在HTML中使用Tailwind

將編譯的CSS文件添加到<head>中，并開(kāi)始使用Tailwind的實(shí)用程序類來(lái)設(shè)計(jì)你的網(wǎng)站或Web應(yīng)用程序的樣式。

4）FlowBite

FlowBite是一個(gè)模塊化的CSS組件庫(kù)，用于更快、更輕松地進(jìn)行Web開(kāi)發(fā)。它通過(guò)響應(yīng)式網(wǎng)格、一致的排版、可定制的組件和可擴(kuò)展的架構(gòu)為你的項(xiàng)目奠定了堅(jiān)實(shí)的基礎(chǔ)。這是一個(gè)開(kāi)源庫(kù)，因此你可以根據(jù)你的特定要求對(duì)其進(jìn)行自定義。它提供了450多個(gè)UI組件（如按鈕和表單）、部分（如頁(yè)眉、頁(yè)腳、導(dǎo)航欄）以及使用TailwindCSS的實(shí)用程序類構(gòu)建的頁(yè)面——所有這些都使用Figma標(biāo)志性的用戶界面設(shè)計(jì)軟件設(shè)計(jì)。Flowbite為開(kāi)發(fā)人員提供的組件數(shù)量使構(gòu)建復(fù)雜、快速加載的Web應(yīng)用程序和網(wǎng)站變得容易。

Flowbite提供了多種網(wǎng)絡(luò)和移動(dòng)UI組件，對(duì)框架沒(méi)有限制。它支持React、Nextjs、Vue、larave、Svelte、Rails、Django、Flask?- Angular等。

FlowBite可以作為任何典型網(wǎng)絡(luò)項(xiàng)目的起點(diǎn)。它簡(jiǎn)單易行，但可以靈活地隨著你的項(xiàng)目而成長(zhǎng)，使其非常適合響應(yīng)式Web開(kāi)發(fā)。

Flowbite還包括使用Figma創(chuàng)建的設(shè)計(jì)文件，F(xiàn)igma是一種用于線框和原型的開(kāi)創(chuàng)性工具。Figma文件清楚地描述了應(yīng)該如何組合所有東西，以及您需要的每個(gè)小細(xì)節(jié)，例如字體大小、顏色——一切。到目前為止，flowbite已被下載超過(guò)697,820次，它有大約2400顆GitHub星。

Flowbite庫(kù)可以使用npm安裝：

確保你已首先在項(xiàng)目中安裝和配置TailwindCSS

或使用yarn：

5）AntDesign

AntDesign是由AntGroup和阿里巴巴巴的分支阿里巴巴云創(chuàng)建的設(shè)計(jì)語(yǔ)言和UI組件庫(kù)。它的靈感來(lái)自谷歌的材料設(shè)計(jì)和蘋(píng)果的平面用戶界面。它是開(kāi)源的，可以在MIT許可證下獲得。

AntDesign由40多個(gè)組件組成，可用于構(gòu)建web和移動(dòng)應(yīng)用程序。AntDesign庫(kù)包括廣泛的UI組件，包括按鈕、旋轉(zhuǎn)木馬、卡片、復(fù)選框、對(duì)話框、輸入、列表、菜單和導(dǎo)航欄。

它還輕松支持模態(tài)、卡片或彈出窗口等組件的動(dòng)畫(huà)，并提供多種材料圖標(biāo)的廣泛集合，可以在任何場(chǎng)景中使用，而無(wú)需擔(dān)心兼容性問(wèn)題或因矢量化而失去質(zhì)量。

AntDesign于2017年4月首次發(fā)布，已被阿里巴巴、騰訊、平安保險(xiǎn)、平安銀行、京東金融、網(wǎng)易云音樂(lè)等許多公司采用。

經(jīng)過(guò)18個(gè)月的開(kāi)發(fā)工作，AntDesign的第一個(gè)版本于2016年底發(fā)布，數(shù)百多名工程師參與了該項(xiàng)目。它包括400多個(gè)組件，涵蓋了現(xiàn)代Web應(yīng)用程序所需的所有主要功能——從通用表單元素到復(fù)雜的數(shù)據(jù)表或交互式圖表。使用AntDesign，你可以構(gòu)建現(xiàn)代網(wǎng)站和Web應(yīng)用程序，并將其與React、VueJS、Angular或多個(gè)不同的JavaScript框架集成。到目前為止，它已被下載超過(guò)1.1億次，擁有約6萬(wàn)顆GitHub星。

AntDesign UI庫(kù)可以使用npm安裝：

或使用yarn：

6）MaterialUI

MaterialUI是由谷歌開(kāi)發(fā)的一種設(shè)計(jì)語(yǔ)言。它具有大膽的色彩、簡(jiǎn)單的形狀和平面設(shè)計(jì)。材料設(shè)計(jì)可以在谷歌的Android操作系統(tǒng)、Chrome OS和谷歌網(wǎng)站上看到。材料設(shè)計(jì)的目標(biāo)是使用戶體驗(yàn)更直觀，與他們的環(huán)境更加和諧。

MaterialUI是一套免費(fèi)的開(kāi)源CSS模塊和組件，你可以使用它們以Google材料設(shè)計(jì)風(fēng)格構(gòu)建網(wǎng)站。它建立在流行的Bootstrap框架之上，并添加了新的組件和CSS類。它提供了一組組件，可用于構(gòu)建Web應(yīng)用程序、網(wǎng)站、應(yīng)用程序等。

MaterialUI自2014年谷歌首次發(fā)布以來(lái)一直存在，但直到最近，隨著自己的CSS庫(kù)的增加，它才成為一個(gè)成熟的設(shè)計(jì)系統(tǒng)。最初的MaterialUI只是一套針對(duì)希望在項(xiàng)目中使用谷歌設(shè)計(jì)語(yǔ)言的設(shè)計(jì)師的指南。它沒(méi)有提供任何可用于使用它構(gòu)建網(wǎng)站或應(yīng)用程序的代碼或工具。到目前為止，它已被下載超過(guò)（npm）2.95億次，并擁有約81,000多顆GitHub星。

Bootstrap庫(kù)可以使用npm安裝：

或使用yarn：

7）Foundation

Foundation是一個(gè)響應(yīng)式前端框架系列。它由CSS預(yù)處理器SASS構(gòu)建，并由設(shè)計(jì)和開(kāi)發(fā)機(jī)構(gòu)ZURB維護(hù)。該框架以其網(wǎng)格系統(tǒng)和移動(dòng)優(yōu)先的建筑布局方法而聞名.

Foundation最初于2010年作為響應(yīng)式網(wǎng)格系統(tǒng)發(fā)布，但后來(lái)擴(kuò)展到包括Web開(kāi)發(fā)所需的其他工具，如排版、表單控制和導(dǎo)航。自發(fā)布以來(lái)，F(xiàn)oundation已被下載超過(guò)數(shù)百萬(wàn)次。其響應(yīng)式網(wǎng)格系統(tǒng)允許設(shè)計(jì)師在瀏覽器中快速原型化他們的想法，而無(wú)需編寫(xiě)任何代碼（或許多CSS）。

基金會(huì)是以移動(dòng)為先的，這意味著它是從頭開(kāi)始設(shè)計(jì)的，考慮到移動(dòng)設(shè)備。它還建立在Sass之上，Sass是一個(gè)強(qiáng)大的CSS預(yù)處理器，允許您編寫(xiě)模塊化代碼，同時(shí)保持演示文稿和內(nèi)容之間的干凈分離。

Foundation有兩種風(fēng)格：Foundationfor Sites（以前稱為Foundationv5）和Foundationfor Web Apps（以前稱為Foundation6）。兩者都是開(kāi)源的，但后者具有專為構(gòu)建基于瀏覽器的應(yīng)用程序（如Web應(yīng)用程序或使用ReactNative的原生iOS/Android應(yīng)用程序）而量身定制的其他功能。到目前為止，它已被下載超過(guò)2300萬(wàn)次（npm），并擁有約29,000多顆GitHub星。

Foundationv6提供了最先進(jìn)的響應(yīng)式前端框架。它輕巧、快速、現(xiàn)代——網(wǎng)站應(yīng)該的樣子！使用Foundation6，您可以輕松創(chuàng)建一個(gè)很棒的網(wǎng)站。

FoundationFramework UI庫(kù)可以使用npm安裝：

或使用yarn：

8）Bulma

Bulma是一個(gè)基于Flexbox的免費(fèi)開(kāi)源CSS框架。它提供了跨瀏覽器的一致性，并使用Sass構(gòu)建，這意味著你可以根據(jù)自己的內(nèi)心內(nèi)容對(duì)其進(jìn)行修改。標(biāo)記是語(yǔ)義的，類名被仔細(xì)選擇為有意義和描述性。

Bulma由JeremyThomas創(chuàng)建，并于2015年初發(fā)布。它目前被全球數(shù)百萬(wàn)多個(gè)網(wǎng)站使用，并已被翻譯成50多種語(yǔ)言。Bulma是一個(gè)基于Flexbox模型的模塊化樣式表框架。它允許你使用多列創(chuàng)建布局，水平或垂直導(dǎo)航，顯示具有靈活寬度或高度的對(duì)象等。你可以使用Bulma創(chuàng)建不同類型的頁(yè)面：登陸頁(yè)面、博客甚至電子商務(wù)網(wǎng)站。

Bulma是完全模塊化的，因此你只能使用最適合您項(xiàng)目的元素。所有組件和元素都有很好的文檔，因此你不會(huì)遇到問(wèn)題，了解它們?nèi)绾螀f(xié)同工作，以及如何根據(jù)需要進(jìn)行自定義。它還旨在提供干凈、舒適和優(yōu)雅的設(shè)計(jì)。它包括幾個(gè)模塊：按鈕、表單、表格、導(dǎo)航欄、選項(xiàng)卡等。到目前為止，它已被下載超過(guò)3500萬(wàn)次（npm），擁有約4.6萬(wàn)顆GitHub星。

BulmaCSS庫(kù)可以使用npm安裝：

或使用yarn：

9）Chakra UI

ChakraUI是一個(gè)完全開(kāi)源的模塊化前端庫(kù)，專注于可訪問(wèn)性和現(xiàn)代用戶體驗(yàn)。這是一組組件，為創(chuàng)建現(xiàn)代Web應(yīng)用程序提供了開(kāi)發(fā)框架。

它已被數(shù)千個(gè)項(xiàng)目使用，自2015年首次發(fā)布以來(lái)已被下載超過(guò)一百萬(wàn)次。

ChakraUI與WAI-ARIA無(wú)障礙標(biāo)準(zhǔn)完全兼容。ChakraUI基于TypeScript和JavaScript構(gòu)建。你可以使用ChakraUI輕松創(chuàng)建自己的設(shè)計(jì)系統(tǒng)，或者你只能安裝其部分組件。由于使用了風(fēng)格道具，定制組件和主題非常容易。它專注于開(kāi)發(fā)過(guò)程，并承諾你將花費(fèi)更少的時(shí)間編寫(xiě)代碼，花更多時(shí)間構(gòu)建出色的用戶體驗(yàn)。到目前為止，它已被下載超過(guò)1600萬(wàn)次（npm），并擁有約28,000多顆GitHub星。

可以使用npm安裝ChakraUI react庫(kù)：

或使用yarn：

使用預(yù)制的UI組件可以幫助你加快網(wǎng)站/應(yīng)用程序的開(kāi)發(fā)。這些預(yù)制組件可以無(wú)縫協(xié)作，可以在短時(shí)間內(nèi)創(chuàng)建獨(dú)特的設(shè)計(jì)，而無(wú)需從頭開(kāi)始編寫(xiě)所有內(nèi)容。

結(jié)論

在本文中，我們查看了市場(chǎng)上九個(gè)最好的免費(fèi)和開(kāi)源前端組件庫(kù)和CSS框架。如果你正在尋找簡(jiǎn)化開(kāi)發(fā)的方法，或正在為你的下一個(gè)項(xiàng)目尋求靈感，請(qǐng)考慮使用上述選項(xiàng)之一。對(duì)于組件庫(kù)和CSS框架來(lái)說(shuō)，未來(lái)是光明的，很明顯，它們?cè)谖磥?lái)幾年將變得越來(lái)越重要。可能永遠(yuǎn)不會(huì)有“一刀切”的解決方案，但隨著新解決方案的問(wèn)面，肯定會(huì)有比其他解決方案更適合你的項(xiàng)目需求。當(dāng)你選擇使用時(shí)，希望本文中的信息能提供一些幫助！