開(kāi)發(fā)者出海時(shí)都在用哪些組件庫(kù)？

?

哈嘍??，我是樹(shù)醬。今天我要介紹的是在開(kāi)發(fā)者出海時(shí)經(jīng)常使用的組件庫(kù)。這些組件庫(kù)大多采用Tailwind CSS作為基礎(chǔ)，它們不僅風(fēng)格獨(dú)樹(shù)一幟，而且外觀也非常吸引人！

1.Shadcn-ui

shadcn的風(fēng)格跟Notion風(fēng)格很像，早在2023年。就以不到一年的時(shí)間，獲得了39k的star的成績(jī)。它是一個(gè)headless UI庫(kù)（沒(méi)有自定義樣式，而是基于Tailwind CSS 和 Radix UI 之上）

• 支持的技術(shù)棧：React. Next.js, Astro, Remix, Gatsby
• 可自定義主題顏色，支持暗黑模式與亮色模式切換。

具體使用：

官網(wǎng)地址：ui.shadcn.com

2.Daisyui

daisyUI 是 Tailwind CSS 的最受歡迎、免費(fèi)且開(kāi)源的組件庫(kù)，作者也正是大名鼎鼎的Tailwind作者。

• 相比 Tailwind CSS 的原子類(lèi)，daisyUI 采用語(yǔ)義化的 class 名，寫(xiě)出更純凈的 HTML（純CSS的實(shí)現(xiàn)，關(guān)注樣式）

• 純CSS框架，它適用于所有 JS 框架

Tailwind CSS 的原子類(lèi)寫(xiě)法

daisyUI的語(yǔ)義話寫(xiě)法 ??

官方地址：daisyui.com

3.EasyFrontend

EasyFrontend 精心整理了超過(guò)600多種基于 Tailwind CSS、Bootstrap 和 React 的組件，并進(jìn)行了詳盡的分類(lèi)。

用戶(hù)可以輕松地找到所需的組件代碼，然后直接復(fù)制粘貼使用，這在創(chuàng)建landing page（即用戶(hù)通過(guò)點(diǎn)擊廣告、搜索結(jié)果或其他途徑首次進(jìn)入網(wǎng)站的特定頁(yè)面）時(shí)尤為便捷。

打開(kāi)你想要的組件模版，然后選擇技術(shù)棧（React&Tailwind CSS ）示范如下：

然后直接復(fù)制代碼，就可以快速便捷的完成好看的官網(wǎng)或落地頁(yè)的開(kāi)發(fā)。

官網(wǎng)地址：https://easyfrontend.com

4.NextUI

NextUI 是一個(gè)現(xiàn)代、高性能且可定制的 React 組件庫(kù)，第一次發(fā)現(xiàn)它是看到AI工具 devv.ai 的組件庫(kù)選型上使用到。同樣也是基于tailwind CSS。

• NextUI 組件庫(kù)具備智能模式識(shí)別功能，能夠自動(dòng)感知 HTML 主題的變化。一旦檢測(cè)到主題模式的轉(zhuǎn)換，NextUI 將無(wú)縫地調(diào)整其組件以匹配新的模式

• 有框架限制，只支持react

官網(wǎng)地址：https://nextui.org/

5.Preline

'

Preline UI 是一組開(kāi)源的 UI 組件，基于 Tailwind CSS 框架。但是沒(méi)有預(yù)設(shè)的Class類(lèi)命名，下面看一個(gè)帶icon和數(shù)據(jù)的卡片示例 ??

再看看最終的代碼呈現(xiàn)方式

官網(wǎng)地址：https://preline.co

6. Tailsc

Tailsc方便開(kāi)發(fā)者使用所有免費(fèi)的 Tailwind CSS 部分開(kāi)始開(kāi)發(fā)，高效地在幾分鐘內(nèi)創(chuàng)建一個(gè)精美的網(wǎng)站。

• 對(duì)搜索引擎SEO 優(yōu)化友好。
• 支持響應(yīng)時(shí)間
• 純CSS框架，只需要復(fù)制粘貼，無(wú)需安裝其他依賴(lài)

同樣我們選擇一個(gè)組件模版：官網(wǎng)描述新特征的組件

然后復(fù)制代碼

官網(wǎng)地址：https://tailsc.com