尋找適合您網站的熱門開源元件，以及了解為開發人員提供的新機會
引擎蓋下
因此，我正在研究這些前端 UI 元件庫，當我看到這個新的 Eldora UI 庫時，就產生了研究它的想法。
我正在寫我的網站 iHateReading 時事通訊，寫時事通訊的一個好處是你必須閱讀很多內容，每個內容創作企業都有一個好處，那就是個人可以閱讀很多有關他/她的領域的內容。
Eldora UI 提供了即用型或複製貼上包裝元件或所謂的進階元件，這就是為什麼我願意解釋這些因 Reactjs 重用概念而出現的新 UI 元件概念。
Eldora UI、Shadcn、MagicUI design 和 Accenticity UI 是高階即用 UI 元件庫的最佳範例。
嗯，我喜歡這個概念，它在某種程度上與聚合中心（一種圖書館）的類比密切相關。前端開發人員仍需要更多的聚合工具或平台，因為現有的工具或平台（目前為止我們只有一個，如果在app.daily.dev 之後包含dev.to，我們就說2 個）不足以獲得準確的讀取，但希望它們能做到工作。
讓我們一一檢查這些網站，並大致了解它們在幕後提供的內容。
中心性使用者介面
看看元件
這些是我發現 eccentricity UI 元件使用的函式庫
-
@tabler/icons-react
-
三個js
-
順風 CSS
-
順風合併
-
CLSX
-
成幀器運動
-
單純形噪音
還有更多小型npm模組，那些對 npm 元件一無所知的人可以繼續閱讀這裡。
例如，我們要建立一個具有以下詳細資訊的懸停卡 UI 元件
顯示懸停動畫的懸停卡
包含內容和靜態 UI 元件的懸停卡
懸停卡背景和動畫（如果需要）
讓我們開始遊戲，為了建立上面的懸停卡，我們需要更多的 npm 模組來幫助我們產生上面的卡片。
ChatGPT 還可以幫助您使用很酷的 npm 模組建立懸停卡，並在懸停時在卡片中加入一些動畫和背景動畫。
此提示將提供範例程式碼，並向 chatGPT 詢問更多此類範例以改變您的想法。
繼續，對於懸停卡元件，這是我的方法
尋找頂級和最佳（趨勢）動畫 npm 模組
找到最好的（趨勢）React UI 技術堆疊以及元件和樣式庫
建立懸停卡並加入動畫
開源/分享懸浮卡完整程式碼
我選擇在 React 元件中新增動畫，framer-motion、react-spring 或 gsap
Tailwind CSS 和 tailwind-merge 當然是迄今為止最好的、最受歡迎的選擇
Nextjs 和 Reactjs 是趨勢框架，Vue 和 Svelte 可以稍後討論。
一旦這些庫最終確定，我只需要建立程式碼並共享它或開源它。
兩年前，在iHateReading，我們有一個名為custom-repos 的頁面，它有助於提供相同的重用UI 元件以及程式碼儲存庫或樣板文件，因為當時GPT 還不存在，所以為每個樣板檔案編寫程式碼是時間-消耗。我發現的一種方法是自動化建立程式碼範例和樣板的過程，GPT 將非常有幫助。
我計劃將這個概念帶回 iHateReading，因為我們的自訂儲存庫路線仍然可以根據 Google Analytics 到達和搜尋。
建立程式碼後，開發人員可以閱讀複製貼上程式碼、安裝所需的 ui 程式庫並自訂要求，然後就可以開始了。
上圖顯示了Wavy Background元件的範例程式碼，它指示開發人員安裝framer-motion tailwind-merge和其他所需的軟體套件。
大多數開發人員一次又一次地執行相同的流程，因為我可以分享我的工作，因此我可以幫助許多類似類型的開發人員最終從中獲得商業模式。
對於這些開發人員來說，現在出現了一個新的機會，但我不確定用戶群是誰，這意味著他們的目標客戶或受眾的樣本量。
令人驚訝的是，我的研究結果與我的想法或預期相反。我發現樣板文件和這些 UI 元件類似於 SAAS 工具的年收入和月收入，其中一些甚至瘋狂地每月賺取 1 萬美元，年收入超過 100 萬美元。
檢查 ShipFast、ScrapingBee 和 ScrapingAnt 年收入或總收入。或者只需閱讀我們的時事通訊即可獲取有關市場需求的重要資訊。
神奇的使用者介面設計
這不僅僅是一個 HOC 元件，也是安裝整個元件模組庫的 CLI 安裝庫
所以這不只是一個高階元件庫，而是一個UI元件庫，它提供了CLI指令來安裝所有UI元件，就像Material UI或Ant Design一樣。
Magic UI 在底層使用相同的概念來提供可重複使用的趨勢高階元件。
使用第三方 npm 模組來實現 UI 元件和動畫
使用熱門前端框架並共享程式碼元件
此方法將始終保持不變，但在開發人員體驗方面存在一些變化。
我不會介紹傳統的 UI 函式庫，我們有很多相關文章。我更多地談論市場中出現的開發人員機會以及開發人員如何圍繞它建立 SAAS。
沙德網/使用者介面
這是詳細的故事， https://medium.com/javascript-in-plain-english/introduction-to-shadcn-ui-library-2ad595f1b424
Shadcn也提供CLI指令和手動設定。
Magic UI 和 Shadcn CLI 指令到底是做什麼的，它將整個 UI 元件加入根目錄的元件目錄中。
因此，使用 CLI 命令安裝相應的套件後，我的目錄將如下所示，如圖所示，而且該映像僅適用於 next.js 目錄。
我們不是從node_module目錄導入元件，而是從元件目錄導入使用元件。
現在material-ui/core中的Button，ant-design將被@/components中的Button取代
這為開發人員提供了另一項能力，即能夠對其進行自訂並將其重用於他/她的設計系統。
例如，如果我想使用建立 4 個專案，我可以在 4 個專案中的每個專案中重複使用相同的樣板，其中包含基於 shadcn 或 magic design 建構的自訂 UI 元件。
因此，我可以一次又一次地做同樣的工作，從而節省了很多時間。
埃爾多拉用戶界面
我們家還有最後一個， Eldora UI
Eldora 為 React 和其他前端框架提供了 10 多個但有限的開源 UI 元件。
使用 React、Typescript、Tailwind CSS 和 Framer Motion 建立的開源動畫元件。 100% 開源，可自訂。
Eldora 使用以下軟體包
成幀器運動
反應日選擇器
日期-fns
@remix/圖標
更多類似的 npm 模組
現在，這對於 SAAS 開發人員工具或平台的外觀來說是有意義的。
使用小型開源 npm 模組，可以建立一組 UI 元件，然後也可以單獨共用這些 UI 元件。
之後新增的另一個工作流程是使用這些 UI 元件或範本建立範例登入頁面。我們的願景是使用這些小型重複使用元件來開發複雜的應用程式或頁面建立器，因為每個網頁都是小型 UI 元件或 DOM 中的 div 元素的組合。
Webpage (DOM) = UI components(HTML element + Style) + Events (states + actions)能夠處理所有開發人員
這些庫沒有處理的一件事是交叉兼容性
意義
-
處理多個前端框架以使用這些元件
-
在複雜的應用程式以及可擴展的應用程式或大型新創組織應用程式中。
我曾與印度的一百萬個流量網站存儲庫合作過，其流量超過數百萬，程式碼庫非常緊湊和復雜，我們無法確定一個小的更改會影響元件或網頁的哪一部分，因此為可擴展應用程式新增元件將是一項任務。
以下是10 個順風 CSS 庫的列表
前端 UI 庫和重複使用 UI 元件是一種趨勢，而且仍然是一種趨勢，只是方法已經改變，開發人員執行此操作的能力也在不斷湧現並變得越來越好。想想從小型 UI 元件集合中產生收入的聰明而酷的方法，並且您可以在市場上測試或推出自己的 SAAS 想法。
結論
人工智慧肯定可以幫助我們在前端尋找更好的解決方案和工具。人類分享工作和為他人重新創造事物的創造力在世界上創造了開源事物，我們將來肯定會創造更多這樣的事物。
好了，今天就到這裡了，請訂閱以透過電子郵件或瀏覽器來源直接閱讀我的故事。
下一篇見
許雷亞
原文出處：https://dev.to/shreyvijayvargiya/3-cool-open-source-ui-frontend-components-libraries-eh8
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式