Uiverse（uiverse.io）は、世界中の投稿者が作ったボタンやローダーなどのUI要素を、HTML/CSS・Tailwind・React・Figmaの形でコピーして使える無料サイトです。「universe ui」「universe css」「uiverse ui」と検索して探されているのも、ほぼこのUiverseです。「universe」はUiverseの綴り違いとして検索されている語で、同じ名前のnpmパッケージ（後述）はUiverseとは無関係です。この記事では、公式サイトの2026年10月時点の公開データ、GitHubミラー uiverse-io/galaxy の全3,802ファイル、npm registryを突き合わせ、使い方とライセンス、貼り付けで崩れる原因、有料の「Uiverse Design」との違いまでを整理します。
まとめ
- Uiverseはコミュニティ投稿のUI要素をコピーして使うサイトです。公式トップの表示は7,467件で、個人利用も商用利用も無料、要素はMITライセンスで公開されています。
- npmパッケージは無く、
npm updateでの追随はできません。コピーした時点のコードを自社コードとして保守する前提です。 - GitHubミラー
uiverse-io/galaxyは2024年9月2日のコミットを最後に止まっており、収録は11カテゴリ3,802件です。最新の要素は公式サイトで探します。 - 貼り付け時には、固定idの重複と汎用クラス名の衝突を確認してください。Tailwind版の要素は、貼り付け先がTailwindのスキャン対象に入っていないと、任意値クラスのスタイルが生成されないことがあります。
- 「AI Design Systems」として売られているUiverse Designは、無料の要素集とは別の有料商品です。Claude CodeやCursorに読ませるデザインシステムで、2026年10月時点で56種類あります。
- 「univer ui」は表計算基盤Univerの
@univerjs/ui、「univers css」は書体のUniversで、いずれもUiverseとは別物です。
Uiverseの提供形態｜投稿型UI要素集とコピーによる導入
Uiverseでは、デザイナーや開発者が作ったUI要素が投稿・審査を経て公開され、閲覧者は要素ページの「Get code」からコードをコピーして自分のプロジェクトに貼り付けます。公式サイトはCloudflareの保護が強く、自動取得では403が返るため、ここではWeb ArchiveのWayback Machineに保存された2026年10月のページで公開データを確認しました。フッターの著作権表記は「Pixel Galaxies」です。
公式サイトの規模｜トップの7,467件と一覧の4,485件
2026年10月31日のトップページは「7,467 Community-made UI elements」「392,735 Contributors to the community」と表示しています。一方、10月16日の要素一覧ページの見出しは「4485 UI elements: CSS & Tailwind」でした。2つの数字は取得日も掲載場所も違い、公式は集計範囲を説明していません。他の記事やツール紹介サイトに出てくる「3,000件」「6,000件超」も、どのページのいつの数字かを確かめてから比べてください。一覧ページのカテゴリはButtons・Checkboxes・Toggle switches・Cards・Loaders・Inputs・Radio buttons・Forms・Patterns・Tooltipsの10種類です。
コピーできる形式｜HTML/CSS・Tailwind・React・Figma
トップページは「Copy as HTML/CSS, Tailwind, React and Figma.」と掲げ、各要素ページからFigmaへのコピー＆ペーストにも対応しています。要素の元のコードは素のCSSで書かれたものとTailwindで書かれたものの2種類で、ReactやFigmaの形式はそこから書き出す仕組みです。デザイナーがFigmaでモックに使い、実装者がHTML/CSSかReactで取り込む、という分担ができます。
npmパッケージ不在と更新の前提
npm registryには uiverse も uiverse-io も登録がなく、どちらも「Not found」が返ります。npm install で導入して npm update で新しい版に追随する、という一般的なUIライブラリの運用はできません。作者が後からバグを直しても、その修正は手元のコードには届きません。必要な要素だけを取り込み、自社コードとして面倒を見ると割り切るのが実態に合っています。
GitHubミラー「galaxy」の中身と2024年9月の更新停止
公式サイトの要素は、GitHubの uiverse-io/galaxy にも自動でアップロードされていました。リポジトリはMIT Licenseで、2026年11月1日時点のスターは14,535、フォークは1,012。READMEには「over 3000 unique UI elements」とあり、投稿はサイト経由のみでプルリクエストは受け付けない、と書かれています。
GitHubミラーの収録内訳｜11カテゴリ3,802件
ミラーのファイルツリーを数えた結果です。1要素が1つのHTMLファイルで、ファイル名は 作者名_スラッグ.html の形式です。
| カテゴリ | 件数 | 構成比 |
|---|---|---|
| Buttons | 1,231 | 32.4% |
| Cards | 726 | 19.1% |
| loaders | 718 | 18.9% |
| Toggle-switches | 260 | 6.8% |
| Inputs | 226 | 5.9% |
| Forms | 180 | 4.7% |
| Checkboxes | 171 | 4.5% |
| Patterns | 103 | 2.7% |
| Radio-buttons | 102 | 2.7% |
| Tooltips | 62 | 1.6% |
| Notifications | 23 | 0.6% |
| 合計 | 3,802 | 100% |
ボタンとローダーだけで約51%を占め、通知は23件しかありません。装飾的なボタンやローディング表現は選択肢が多い一方、トーストやモーダルのような挙動を伴う部品を一式そろえる用途には向かない、という偏りが数字に出ています。現在の公式サイトのカテゴリにNotificationsは無くなっています。
最終コミット2024年9月2日｜ミラーの使いどころ
mainブランチの最終コミットは2024年9月2日の「Launching a new loader to space!」で、投稿のたびに1件ずつ積まれる自動生成のコミットが、その日を最後に止まっています。リポジトリはアーカイブされていませんが、2026年11月時点まで更新はありません。公式トップの7,467件と比べると、ミラーに入っているのは半分程度です。
cloneして最新の要素を一括で手に入れる使い方は成り立ちません。デザインを探すのは公式サイト、過去の要素をまとめてgrepしたりライセンス条文を確認したりするのはミラー、と役割を分けてください。
CSS版とTailwind版を見分けて貼り付ける手順
ミラーの3,802件のうち、<style> を持つCSS版が3,369件（88.6%）、持たないTailwind版が433件（11.4%）です。9割弱はTailwind無しで動きます。貼り付け前に確認する点が型ごとに違うので、まず型を見分けます。
由来コメントの記法による型の判別
各ファイルには作者名とタグを記した由来コメントが入っており、その記法が型と完全に一致します。CSS版は /* From Uiverse.io by … */ というCSSコメントで3,369件、Tailwind版は <!-- From Uiverse.io by … --> というHTMLコメントで433件。件数が型の内訳とぴったり重なるので、クラス名を読むより確実に判別できます。
CSS版｜HTMLとstyleブロックの取り込み
CSS型の要素は、マークアップと <style> ブロックが同じファイルに入っています。Buttonsカテゴリの実ファイルから、構造が分かる範囲を抜粋します。
<button class="cta">
<span>Contact Us </span>
<!-- ここに矢印のsvgが入る -->
</button>
<style>
/* From Uiverse.io by 0x-Sarthak - Tags: button, hover, rounded, animated, hover button */
.cta {
position: relative;
margin: auto;
padding: 11.5px 18px;
transition: all 0.2s ease;
border: 3px solid #552da8;
border-radius: 50px;
background: #552da8;
cursor: pointer;
}
/* 以下 .cta:before、.cta span、.cta svg、:hover、:active が続く */
</style>
動作に必要なのは <style> の中身です。ReactやVueに持ち込むなら、CSS Modulesやグローバルスタイルシートへ切り出してください。CSS Modulesでは、CSSの移動に加えて、マークアップ側も生成されたクラス名の参照へ変更します。padding: 11.5px 18px や #552da8 のような作者の決めた値がそのまま入っているので、自社のデザイントークンに合わせるなら数値の書き換えは避けられません。
Tailwind版｜任意値クラスの生成とスキャン対象
Tailwind型はクラス名だけで見た目が決まり、<style> を持ちません。Cardsカテゴリの実ファイルです。
<!-- From Uiverse.io by 05akalan57 - Tags: card, border, css effect -->
<div class="relative drop-shadow-xl w-48 h-64 overflow-hidden rounded-xl bg-[#3d3c3d]">
<div class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-xl inset-0.5 bg-[#323132]">CARD</div>
<div class="absolute w-56 h-48 bg-white blur-[50px] -left-1/2 -top-1/2"></div>
</div>
bg-[#3d3c3d] や blur-[50px] は任意値（arbitrary values）です。貼り付け先がTailwindのスキャン対象外の場合、そのファイルにしか現れないクラスのCSSは生成されません。他の対象ファイルや明示的な生成指定に同じクラスがあれば、そのスタイルは反映されます。v3系なら設定ファイルのcontent、Tailwind CSS v3とv4の違いで解説しているv4ならCSS側で指定するソースの範囲に、貼り付け先が含まれているかを先に確認してください。バリエーションを持たせて管理する段階に入ったら、Tailwind Variantsのslots・compoundVariantsへ移すと崩れにくくなります。
コピペ後に崩れる典型パターンと回避策
ミラーの実ファイルには固定idや汎用クラス名が含まれるため、複数要素を同じページへ取り込む際は、idの重複とCSSの衝突を確認します。件数はごく少ないものの、ライセンスが同居する要素も1件あります。
固定idによるlabel関連付けの破綻（Toggle-switches 260件中111件）
Toggle-switchesの260件のうち111件が固定のid値を持ち、そのうち12件は id="switch" という汎用名でした。for 属性を持つ要素は95件。典型的なマークアップはこの形です。
<label class="switch" for="switch">
<input id="switch" type="checkbox" class="circle" />
</label>
id属性は文書内で一意である必要があり、重複すると for は文書順で最初のidを参照します。同じ要素を1ページに2つ貼ると、2つ目のlabelが最初のinputを参照します。ただし、2つ目のinput自体を直接クリックした場合は、そのinputが切り替わるため、挙動はクリック位置にも依存します。ラジオボタンでは name の重複が同じ問題を起こし、別グループのはずの選択肢が相互排他になります。複製するときはidを要素ごとに一意にし、対応するlabelのforを同じ値に変更してください。ラジオボタンのnameはグループごとに分け、同じグループ内では共通にします。
.switch・.ctaなど汎用クラス名のグローバル衝突
CSS版の <style> はページ全体に効き、クラス名には短い一般語が使われています。ミラーの実測では class="switch" が126件、class="cta" が5件、radio-input が41件（うち39件はRadio-buttons）。同じクラス名を使うCSSは両方の要素に適用され、宣言が競合します。重要度・レイヤー・詳細度などの優先条件が同じ場合に、後に記述された宣言が優先されます。Bootstrapなど既存のCSSに同名クラスがある場合も同じです。
貼り付けるときに .uv-cta のようなプレフィックスを付けるか、CSS Modulesやスコープ付きスタイルの中へ入れてください。異なる作者の要素を2つ以上使うプロジェクトでこの作業を省くと、後から原因の切り分けに時間を取られます。
3,802件中1件だけ同梱されるFont Awesomeの帰属表示
全ファイルを走査すると、Font Awesomeのアイコンを埋め込んだ要素はToggle-switchesの1件だけでした。この要素にはFont Awesome Free 6.5.1のSVGと Copyright 2024 Fonticons, Inc. の表記が入っていますが、ファイル内にHTMLコメント記号は1つも無く、帰属表示はコメント記号が剥がれた状態で <svg> 直下の生テキストとして残っています。行頭に ! だけが残っているのが元はコメントだった痕跡です。
Font Awesome Freeのライセンスは形式ごとに分かれ、Font Awesome Free LicenseではアイコンがCC BY 4.0、フォントがSIL OFL 1.1、コードがMIT Licenseです。SVGアイコンには帰属表示が要ります。テキストノードは画面に出ないうえ、整形やDOM操作で気付かないうちに消えます。SVGを含む要素を使うときは、帰属表示を正しいコメントに書き直すか、自社のアイコンに差し替えてください。
MITライセンスの範囲と帰属表示の実務
公式サイトのフッターは「All content (UI elements) on this site are published under the MIT License.」と明記し、トップページも「Free for personal and commercial use」と表示しています。ミラーのLICENSEも MIT License（Copyright (c) 2023 Uiverse.io）です。MITなので商用利用・改変・再配布まで認められ、条件は著作権表示とライセンス条文を複製物に含めることです。原作者とUiverse.ioへのクレジットは、READMEでは必須ではなく推奨という扱いです。
実務では、取り込んだCSSやHTMLの先頭に著作権表示を残すか、NOTICEファイルにライセンス条文とまとめて配布物・納品物に同梱します。要素ページのURLを書くだけでは条件を満たしません。判断が要るのは、前節のFont Awesomeのように要素の内側に第三者のアセットが混ざっているケースと、次章のUiverse Designのように無料の要素集とは別に売られている商品です。
有料の「Uiverse Design」｜AIコーディング向けのデザインシステム
公式サイトのナビゲーションには「AI Design Systems」という項目があり、Uiverse Designへつながっています。2026年10月4日のページは「Framework-agnostic design systems for AI-assisted products」と題し、「De-slop your AI websites」を掲げていました。AIに生成させた画面がどれも似た見た目になる問題に対し、配色・書体・コンポーネントの使い方をまとめたデザインシステムをコードベースに置き、コーディングエージェントに従わせる、という商品です。
各デザインシステムは「portable CSS, DESIGN.md guidance, and components」で構成され、対応先としてClaude Code・Cursor・Codexが挙がっています。同日時点で56種類がすべてPremium表示で、個別価格の例としてTransectが12.99ドル、全種類の買い切りが34.99ドル（「Limited time 50% OFF」表示）でした。価格は期間限定の表示を含むので、購入前に同ページで確認してください。
無料の要素集とは性質が違います。要素集は「ボタン1つ」を借りる場所で、Uiverse Designは画面全体の見た目のルールを買う場所です。AIに画面を作らせる進め方そのものはVibe Design（バイブデザイン）の進め方とツール比較で整理しています。利用条件はMITの要素集とは別なので、受託案件で使うなら購入前に規約を読んでください。
shadcn/ui・daisyUIとの違い｜配布方式と更新方法の比較
「コピーして使う」点でUiverseはshadcn/uiに似ていますが、取り込んだ後の扱いが違います。比べるべきは見た目ではなく、配布方式と更新の受け取り方です。
| 観点 | Uiverse | shadcn/ui | daisyUI |
|---|---|---|---|
| 取り込み方 | ブラウザでコピー | CLIでソースを追加 | npmパッケージ |
| 更新の受け取り | 不可（手で差し替え） | CLIで再取得・差分は手で反映 | npm update |
| 作者・命名の一貫性 | 要素ごとにばらばら | 1つの設計で統一 | 1つの設計で統一 |
| 前提の技術 | なし（CSS版） | React＋Tailwind | Tailwind |
| 向く用途 | 装飾・LP・試作 | Reactアプリの土台 | Tailwindサイトの土台 |
Reactアプリの土台ならshadcn/uiの導入手順、Tailwindのクラスで部品をそろえるならdaisyUIのTailwind CSS v4での使い方を選び、Uiverseはその上に載せる装飾として使うのが崩れにくい組み合わせです。
Uiverseと紛らわしい名前の切り分け
検索では「universe ui」「univer ui」「univers css」といった表記ゆれが多く、1文字違いで別のプロダクトに行き着きます。名前が近いものはnpm registryなどの実データで次のように切り分けられます。いずれもuiverse.ioのUI要素集とは別物です。
| 名前 | 正体 | 状態（2026年11月1日確認） |
|---|---|---|
| @univerjs/ui | 表計算基盤UniverのUI層 | 1.3.1（2026年10月30日）・Apache-2.0 |
| universe-ui（npm） | 別作者のUIパッケージ | 1.0.0-alpha.95（2020年8月28日）で停止 |
| universe（npm） | 多変量データのクエリ用ライブラリ | 0.8.1（2017年7月13日）で停止 |
| Universe | ノーコードのサイト作成サービス | 2026年12月31日で終了予定 |
| Univers | Adrian Frutigerの書体（1957年） | Webでは配信サービス経由で読み込み |
迷いやすいのは @univerjs/ui で、ブラウザで動く表計算・ドキュメント基盤Univerのメニューやダイアログを担うパッケージです。Universeは公式の終了告知で、サイトは2026年12月31日まで動くとされています。書体のUniversは、CSSで font-family: Univers; と書いても閲覧者の端末には基本的に入っていないので、Webフォントとして読み込む必要があります。
Uiverseを採用すべきでない場面
複数チームで長期保守するデザインシステムの土台には使わないでください。更新が届かず、要素ごとに作者もCSSの書き方も命名規則もばらばらなので、取り込む数に比例して保守コストが上がります。土台にはパッケージ配布のコンポーネント集か、アトミックデザインの5階層に沿った自前実装を置き、Uiverseはその上の装飾レイヤーに留めるのが妥当です。
キーボード操作やスクリーンリーダー対応が要件に入る画面でも、そのままの採用は避けます。input と label を使った素直なマークアップの要素がある一方、div とCSSだけで見た目を組んだ要素も混在しており、担保のレベルが要素ごとに違います。カテゴリ単位で安全と判断せず、採用する要素のマークアップを1つずつ読んでから決めてください。
いちばん向いているのはプロトタイプです。デザインの方向性を決める段階で貼って議論し、採用が固まったら自社のコンポーネントとして書き直します。書き直したコンポーネントをChromatic（Storybook連携）の差分テストに載せれば、自社で変更した際の意図しない見た目の変化を検出できます。コピー元の修正確認や、不具合修正そのものは別途必要です。画面設計の段階から部品の選び方を相談したい場合は、UI/UXデザインの支援も行っています。
よくある質問
「universe ui」で出てくるUIライブラリは何ですか？
「universe ui」「universeui」「ui universe」で探されているのは、多くの場合、綴りの近いuiverse.io（Uiverse）です。CSSまたはTailwindで書かれたUI要素をコピーして使うコミュニティサイトで、GitHubミラーは uiverse-io/galaxy です。npmの universe-ui と universe は同名の別物で、2020年・2017年から更新が止まっています。
Uiverseの要素は商用利用できますか？
できます。公式サイトは要素をMIT Licenseで公開し、「Free for personal and commercial use」と表示しています。使用・改変・再配布は認められますが、著作権表示とMITライセンス条文の保持が条件です。READMEで推奨される紹介・謝辞としてのクレジットとは区別してください。ただし要素の中に第三者のアイコンが入っている場合は、そのアセットの条件（Font Awesome FreeのSVGならCC BY 4.0の帰属表示）が別にかかります。
ReactやFigmaで使えますか？npmでインストールできますか？
要素ページからHTML/CSS・Tailwind・React・Figmaの形式でコピーできます。npmでは提供されておらず、uiverse という名前のパッケージは登録されていません。コピーした時点のコードが固定され、npm update による追随もできないので、更新を受け取りたい用途にはdaisyUIのようなパッケージ配布のコンポーネント集を選んでください。
Tailwindを使っていなくても使えますか？
GitHubミラーの3,802件のうち3,369件はTailwind無しで動くCSS版です。CSS版は同じファイル内のHTMLと <style> をコピーすれば完結します。Tailwind版は bg-[#3d3c3d] のような任意値クラスを含むため、貼り付け先がTailwindのスキャン対象に入っていないと、他で使われていない任意値クラスのスタイルは生成されません。由来コメントがCSSコメント形式なら前者、HTMLコメント形式なら後者です。
Uiverse Designは無料の要素と何が違いますか？
Uiverse Designは有料のデザインシステム集で、無料の要素集とは別の商品です。CSS・DESIGN.md・コンポーネントをコードベースに置き、Claude CodeやCursorなどのコーディングエージェントに画面の見た目をそろえさせる用途で売られています。2026年10月4日時点で56種類あり、個別価格の例としてTransectが12.99ドル、全種類の買い切りが34.99ドルの表示でした。ボタンやローダーを借りるだけなら無料の要素集で足ります。
