Shadcn-UI是一組基于React構(gòu)建的UI組件，它支持通過(guò)Tailwind CSS實(shí)現(xiàn)自定義樣式。而且它建立在Radix之上，Radix提供了一套無(wú)頭（headless）組件，用于解決無(wú)障礙訪問(wèn)和鍵盤(pán)交互等用戶體驗(yàn)問(wèn)題。

它曾是2023年最受歡迎的前端UI組件庫(kù)，自項(xiàng)目創(chuàng)建以來(lái)下載量和關(guān)注量也是直線上升。

截至現(xiàn)在，Github上的星星數(shù)量已超過(guò)78k！

另外，與其他流行的UI庫(kù)不同，shadcn-ui并不是一個(gè)可以直接下載的NPM包，它提供了一種獨(dú)特的集成方式：通過(guò)終端命令引入組件。執(zhí)行命令后，不僅會(huì)安裝必要的底層依賴，還會(huì)將組件的源代碼直接復(fù)制到項(xiàng)目代碼庫(kù)中。這樣一來(lái)，開(kāi)發(fā)者可以根據(jù)自身需求修改組件源碼，這對(duì)一些定制要求比較高的項(xiàng)目，簡(jiǎn)直是太靈活了！

Shadcn UI 功能特點(diǎn)

多主題和主題編輯器

shadcn-ui本身并不直接提供多主題切換的功能，但你可以通過(guò)結(jié)合 Tailwind CSS 和一些自定義邏輯來(lái)實(shí)現(xiàn)多主題支持。

在shadcn-ui的官網(wǎng)上有一個(gè)主題編輯器，我們可以點(diǎn)擊Customize按鈕實(shí)時(shí)切換風(fēng)格和主題顏色，設(shè)計(jì)完成后，我們只需要拷貝css主要變量到我們的程序中即可。

CLI自動(dòng)生成代碼

除了手動(dòng)從文檔中復(fù)制組件代碼到項(xiàng)目中，還可以使用 cli 來(lái)自動(dòng)生成代碼。

初始化配置npx shadcn-ui@latest init添加組件npx shadcn-ui@latest add

按空格選擇想要的組件，按回車就會(huì)下載選中的 UI 組件代碼。

豐富的組件庫(kù)

shadcn-ui提供了豐富的組件，質(zhì)量都很好，包含了常用的布局、按鈕、表單、圖表、彈窗等40多個(gè)組件。每個(gè)組件都有詳細(xì)的文檔和示例代碼，你可以根據(jù)需要進(jìn)行自定義和擴(kuò)展。

在官網(wǎng)組件庫(kù)中，有全部的組件及示例代碼，我覺(jué)得你有必要自己去看一看、試一試，會(huì)讓你心動(dòng)的。

開(kāi)源地址：

https://github.com/shadcn-ui/ui

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/