Uiverse 免費元件庫：現成元件複製就用，最新元件只在官網

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

想讓按鈕或載入動畫有點質感，從現成元件改起通常比對著空白畫面快。Uiverse 是一個社群共筆的介面元件庫，設計者上傳按鈕、卡片、開關、載入動畫等作品，全部免費，用 CSS 或 Tailwind 語法寫成，可以直接複製進任何專案。它有兩個入口：官網負責瀏覽、預覽與複製，GitHub 上的 Galaxy 倉庫收著同一批元件的原始碼。這篇文章想講清楚的重點只有一個：兩個入口的新舊程度差很大。我把倉庫的檔案清單整份拉下來清點，Galaxy 停在 3,802 個元件檔，最後一次同步是 2024 年 9 月 2 日；官網在同一時間點已經累積到 7,467 個。換句話說，站上元件將近倉庫的兩倍，2024 年 9 月之後上架的元件一個都不在倉庫裡；把 GitHub 倉庫當成最新來源，拿到的是一份兩年前的快照。

倉庫與官網的關係：一條單向的自動鏡像

Galaxy 的 README 把兩邊的關係寫得很白：這是 Uiverse.io 的官方倉庫，設計者在網站上投稿、通過審核之後，官方會自動把作品上傳到這裡。倉庫本身不收直接提交，文件明寫 pull request 一律忽略，一切以網站平台為準。靠著這條單向管道，倉庫從 2023 年 10 月開張後累積到約 1.5 萬顆星（截至 2026 年 11 月），以一個 UI 元件庫來說人氣相當高。

實際把檔案樹拉下來看，結構很乾淨：11 個分類資料夾，每個元件一個獨立的 HTML 檔，檔名格式是「作者_元件名」。打開檔案，CSS 版本的前半是 HTML 結構、後半是一段內嵌的 style，Tailwind 版本則沒有 style 區塊，樣式直接寫在類名裡；兩種檔案的檔頭註解都寫著「From Uiverse.io by 作者名 – Tags: 類型」，出處直接嵌在程式碼裡。抽樣 30 個檔案檢查，全部自包含：沒有外部字型、沒有外部圖片、沒有 script，也不需要任何建置流程。這種單檔格式對想拿元件餵 AI 的人特別友善，後面會單獨談怎麼用。

還有一個挑元件時會直接遇到的地板：每個元件都用 CSS 或 Tailwind 其中一種語法寫成，站上的分類資料對每個元件都標示了版本類型，兩種並存。對沒有用 Tailwind 的專案來說，挑 CSS 版本的元件，貼進去就能動；用 Tailwind 的專案則要注意元件的類名寫法與自己專案的設定是否一致，否則樣式會對不起來。這個標示在倉庫檔案裡看不出來，只有在官網的元件頁上找得到，又是「原件要在官網看」的一個理由。

授權兩邊都寫明 MIT，作者標示是禮貌不是義務

授權是這類元件庫最常被問的問題，Uiverse 的答案寫在兩個地方。倉庫的 LICENSE 檔是標準 MIT 條文，著作權聲明是 2023 年 Uiverse.io；README 進一步說明「所有 UI 元件以 MIT 授權提供」，可以自由使用、修改、散布。官網頁腳也有一句對應的話：「本站所有內容（UI 元素）以 MIT 授權發布」。也就是說，不論你從哪個入口拿，授權條件一致：免費、可商用、可修改，不需要逐元件確認，也不必擔心今天上線明天收費。

Pin

README 另外花了一段談出處標示：標註原作者與 Uiverse「並非必要，但我們非常重視」。實務上最省事的做法，就是保留檔頭那行註解，或在專案的感謝清單記一筆，對原創作者是一種起碼的尊重。有一個邊界要自己劃清楚：MIT 涵蓋的是元件的程式碼與樣式，Uiverse 這個名稱和標誌是另一回事，要把它們放進自己的產品宣傳，就不在這份授權的範圍裡，那是商標的領域，得另行評估。

Pin

鏡像停在 2024 年 9 月 2 日，兩邊都沒有交代

翻開倉庫的提交紀錄，會看到非常規律的自動訊息：每上架一個元件，就出現一筆「Launching a new button to space!」或「Launching a new loader to space!」，訊息裡帶著該元件在官網的網址。這條流水線的尾聲並不冷清：凍結前最後一個完整月份，2024 年 8 月一個月就有 122 筆自動提交，平均一天將近四筆，其中 12 筆是更新既有元件，代表它同步的不只是新上架，連設計者回頭修改的版本也會跟著更新。然後在 2024 年 9 月 2 日 14:32（UTC）之後，一切歸零。最後一筆是一個軌道造型的載入動畫，作者 Cksunandh。

Pin

值得對照的是官網那一側的活力。網站本身持續有新作上架，站方部落格到 2026 年都還在更新，導覽列上甚至掛出了新的付費產品線。一邊明顯活著，另一邊的鏡像靜靜停擺，這個反差才是最容易誤導人的地方：只看 GitHub 星數與 README，會以為兩邊是同一個東西的兩個門面。

而且缺口有兩層，都有具體例子。第一層在凍結之前就存在：作者 barisdogansutcu 的 proud-lion-79 按鈕，官網頁面早在 2024 年 2 月就被網頁封存服務存了下來，但把倉庫全部 3,802 個檔名逐一比對，始終沒有它，鏡像還在運轉的時候，收錄就不是完整的。第二層是凍結之後的新品：作者 Smit-Prajapati 有 20 個元件被倉庫收錄，他的 lazy-cow-47 在 2024 年 11 月出現、到 2025 年 10 月的封存紀錄裡都還在官網上，倉庫裡同樣查無此檔。所以別把帳面數字當底線：倉庫的完整度比「停在兩年前」還要再低一層，而既有元件在官網被作者改版之後，倉庫裡留下的也還是舊版本。

更微妙的是文件的態度。README 到今天仍用現在式描述那條自動上傳的管道，官網頁腳也持續連向倉庫，兩邊都沒有任何「停止同步」的公告或說明。原因為何，倉庫的 issues 裡也找不到官方回覆。我的建議是別急著替它下結論：這不是棄用宣言，但也別假設它哪天會自己恢復。對需要可重現環境的團隊，比較穩的做法是把要用的元件存進自己的版本庫，釘在你驗證過的版本上，任何一邊的變動都不會再影響你。

官網和倉庫的實際差距

兩個來源各自清點一次，逐類對照如下。官網側取自 2026 年 11 月 9 日的頁面資料，倉庫側是 2026 年 11 月 12 日的檔案清點。

幾個值得停下來看的數字。官網各分類的數量是倉庫的 1.4 到 2.8 倍，圖樣類差距最大（285 對 103），表單類最小（252 對 180）；唯一打平的是通知類，兩邊都是 23 個，這比較像該分類本來就很少有人投稿，倒不像倉庫悄悄更新過。合計相差 3,665 個元件，再算上凍結前就存在的收錄缺口，倉庫的完整度比這個數字顯示的還要低。另外，README 自稱「超過 3,000 個元件」，實際清點是 3,802 個，連倉庫自己的文件都落後於實況。官網的計數是浮動的，本文以快照日為準，之後差距只會繼續擴大。

對挑元件的實際意義，各分類的可用深度差很多。按鈕與載入動畫是最大的兩個池，合計接近四千個，也是 AI 寫前端時最常被借用的兩類：一個撐門面呼叫，一個撐等待時間。卡片類偏版面構成，拿來當結構參考很好，直接套用則常與自家版面衝突，若要的是整套現成的版面起點，之前介紹過的 Free Deca UI Kit 免費元件包 是另一種選擇。圖樣是背景紋理與裝飾，通知與提示框數量最少，選擇空間本來就有限。先想清楚要哪一類，再回頭看這張表，就知道新舊來源的差距會不會真的影響你。

複製前的核對順序

知道來源有新舊之別後，實際動手複製時照著一個順序檢查，可以省掉大多數返工。

先在官網找到原件。用分類或搜尋挑中元件後，停留在它的官網頁面上，確認預覽正常、作者資訊完整、標示的是 CSS 還是 Tailwind 版本，這是目前唯一的新品來源，也是版本資訊最完整的地方。需要離線參考或想直接看原始碼時，再打開倉庫，用「作者_元件名」到對應分類資料夾裡找同一個檔案；但要有一個預期，2024 年 9 月之後上架的元件在倉庫裡不存在，而既有元件也可能停在舊版。

拿到檔案後，讀一遍檔頭註解，確認原作者與類型標籤，順手保留那行註解。接著檢查類名與選擇器：元件自帶的類名通常不會與別家相撞，但一次搬多個元件時，樣式之間互相覆蓋的機率隨數量上升，大段的內嵌 style 也可能影響專案裡既有的元素，貼上後先檢查它動了哪些選擇器。有動畫的元件，再花一分鐘確認它尊重使用者的減少動態效果偏好，以及換成手機觸控時的行為，這兩個情境最常讓桌面預覽好看的元件破功。最後換上真實文案再驗一次，範例裡的短英文換成中文按鈕文字後，寬度、換行與斷行位置常常是另一個樣子，載入動畫也要確認在低效能裝置上的幀率可以接受。

拿給 AI 接：先講清楚借什麼

單檔、零相依、出處嵌在註解裡，這種格式幾乎是為 AI 輔助開發準備的：把整個檔案貼進對話，模型就能同時看到結構、樣式與來源，不需要再補脈絡。以倉庫最後一筆收錄的那個軌道載入動畫為例，整個元件就是六個 div 加一段 CSS，用陰影與漸層畫出三圈光環和一個旋轉核心，沒有任何框架綁定。對正在用 AI 寫前端的人，把 Uiverse 當成互動與結構的參考庫，比讓模型憑空生成一個載入動畫更容易得到有質感的結果。

下指令時把範圍講死會穩很多，例如「只借用這個元件的互動與結構，顏色、字體、圓角沿用目前專案的設定」。這句話擋掉的是最常見的失敗模式：一次搬入好幾個元件的完整視覺，同一頁塞了三套互不相讓的風格，回頭清理的成本比一開始省下的時間還高。

一個可用的流程是三段式：先把選定的元件檔整份貼給 AI，請它用一兩句話說明這個元件的結構與互動依賴哪些部分；確認它讀懂之後，再貼上你專案目前的按鈕或卡片程式碼，請它把前者的互動移植進後者的類名與色彩體系；最後請它列出新增與修改過的選擇清單，方便你回頭檢查有沒有動到不該動的樣式。多花這一來一往，通常比直接說「幫我把這個元件加進去」省下好幾輪修正。

若你的需求是讓 AI 從描述直接生成元件，之前介紹過的 OpenUI 是生成那條路；想把現成積木直接交給 Claude，可以看 Bencho 的 React 積木與 MCP 整理。

免費庫之外，站方還賣一套 AI 設計系統包

瀏覽官網導覽列會看到一個標著 New 的「AI Design Systems」，那是另一條產品線：Uiverse Design，主打「給 AI 產品用的設計系統」，頁面標示 56 套系統、整套 34.99 美元（劃記原價 69.99 美元，文案另標單買總值 644.04 美元、限時優惠）。每一套系統是一個完整的主題包，頁面上的範例標明內含五個檔案、一個標誌、三套字型與六組色彩，訴求對象正好是把網站交給編碼代理的人：頁面標榜把設計系統丟進任何程式碼庫，Claude Code、Cursor、Codex 這些工具都能直接採用。相容性與實際效果是官方說法，本文沒有驗證。

要把界線畫清楚的是：這個付費包和上文那套 MIT 元件庫是兩回事。元件庫的授權與數量沒有因為付費產品出現而改變，付費買的是整理成套的設計系統，不是元件庫的進階版；折扣與頁面標價也可能變動，採購前以官方頁面當日標示為準。

還不確定與之後要回查的事

有三件事本文給不出答案。鏡像為什麼停在 2024 年 9 月 2 日，官方沒有在任何一邊說明，只能確定現象，不能推測動機。同步會不會恢復，同樣未知；想自己盯著的人，在 GitHub 上 watch 這個倉庫即可，它一旦出現 2024 年 9 月之後的新提交就會通知你，那也是這篇文章的凍結敘述需要跟著更新的日子。官網的分類計數會持續成長，文中的 7,467 是 2026 年 11 月 9 日的數字，你讀到這篇時實際數量幾乎一定更高。

對大多數人，下一步很單純：到官網挑元件，複製時保留那行作者註解，交給 AI 前把「借結構還是借視覺」講清楚。至於倉庫，把它當成一份穩定但過期的離線存檔，而不是最新目錄，兩個來源就都能各司其職。