---
title: "「universe ui」の正体はUiverse(uiverse.io)｜コピペCSS・Tailwind UI要素の実体とライセンス"
url: "https://www.issoh.co.jp/column/details/2993/"
published: 2024-07-09
updated: 2026-08-03
categories: ["Webサイト"]
publisher: "株式会社一創"
---

# 「universe ui」の正体はUiverse(uiverse.io)｜コピペCSS・Tailwind UI要素の実体とライセンス

「universe ui」「universe css」「universe html css」で検索してこのページに来た方が探しているのは、ほぼ **uiverse.io（Uiverse）**です。universeという名前のUIライブラリは流通しておらず、綴りの近いUiverseが実体にあたります。この記事では、GitHubミラー `uiverse-io/galaxy` の全3,802ファイルとnpm registryを実測して、Uiverseが何を配っているのか、貼り付け前に何を確認すべきか、そして「univer」「univers」との切り分けまでを整理します。

## まとめ

- Uiverseは、投稿されたボタンやローダーのコードをコピーして使うコミュニティサイト。パッケージとして配布されるUIライブラリではありません。
- npmに `uiverse` パッケージは存在せず（registryは404を返します）、`npm update` による追随はできません。
- GitHubミラー `uiverse-io/galaxy` はMITライセンスで11カテゴリ3,802件。ただしmainブランチの最終コミットは2024年9月2日で、以降の投稿は含まれません。
- 要素は `<style>` を持つCSS版3,369件と、持たないTailwind版433件に分かれます。由来コメントの記法だけで判別できます。
- 貼り付け時の事故はid属性とクラス名の扱いに集中します。ライセンスは要素本体がMITでも、内側に別条件のアセットが混ざる例が1件あります。
- 「univer ui」は表計算基盤Univerの `@univerjs/ui`、「univers css」は書体のUnivers。いずれもUiverseとは別物です。

以下、それぞれの根拠と実務上の判断を順に見ていきます。

## Uiverseの提供形態｜npm非対応のコピペ配布とコミュニティ投稿

Uiverseは、デザイナーや開発者が作ったUI要素を投稿し、閲覧者がそのコードをコピーして自分のプロジェクトに貼り付けるサービスです。公式サイトは uiverse.io、GitHubミラー `uiverse-io/galaxy` のリポジトリ説明は「The largest Open-Source UI Library! Community-made and free to use. Made with either CSS or Tailwind.」。リポジトリは2023年10月1日に作成され、GitHub APIで確認した時点でスター11,890・フォーク836、アーカイブはされていません。

### 11カテゴリ3,802件の内訳（GitHubミラー実測）

ミラーのファイルツリーを再帰取得して数えた結果が次の表です。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%を占めます。対する通知（Notifications）はわずか23件。装飾的なボタンやローディング表現を探すなら候補は豊富ですが、トースト通知やモーダルのように挙動を伴う部品を一式そろえる用途には向かない、という偏りがそのまま数字に出ています。READMEの記載は「over 3000 unique UI elements」で、実測値と整合しました。公式サイト側の一覧はミラーに同期されていない投稿を含むため、現在の総数は uiverse.io で確認してください。

### npmパッケージ不在が意味する更新・依存管理の違い

npm registryに `uiverse` という名前のパッケージは登録されておらず、レジストリAPIは404を返します。`npm install` で導入して `npm update` で新しい版に追随する、という一般的なUIライブラリの運用はできません。

コピーした時点のHTMLとCSSが自分のリポジトリに固定されます。作者が後からバグを直しても、ブラウザの仕様変更に追随しても、その修正は手元には届きません。パッケージとして配布される[daisyUIのようなTailwind CSSコンポーネント集](/tech/details/2987/)とは、保守の前提が根本的に違うわけです。長期運用する画面の土台に据えるのではなく、必要な要素だけを取り込んで自社コードとして面倒を見る、と割り切るのが実態に合っています。

### GitHubミラー「galaxy」の2024年9月以降の更新停止

GitHub APIでコミット履歴を見ると、mainブランチの最終コミットは2024年9月2日でした。コミットメッセージは「Launching a new loader to space!」に投稿された要素のURLが続く自動生成の形式で、投稿があるたびに1件ずつ積まれる仕組みだったことが読み取れます。2026年8月時点まで、それ以降のコミットはありません。リポジトリ自体はアーカイブされておらず、READMEが説明する自動アップロードが2024年9月2日を最後に動いていない、というのが観測できる事実です。

つまり、リポジトリをcloneして最新の要素を一括で手に入れる、という使い方は成り立ちません。デザインを探すのは公式サイト、ライセンス条文や過去要素をまとめて検索したいときにミラー、と役割を分けるのが正確です。なおREADMEによれば、要素の投稿はサイト経由のみで、リポジトリへのプルリクエストは受け付けていません。

## CSS版とTailwind版の見分け方と貼り付け手順

同じUiverseの要素でも、素のCSSで書かれたものとTailwindのユーティリティクラスで書かれたものが混在します。ミラーの実測では `<style>` を持つCSS版が3,369件（88.6%）、持たないTailwind版が433件（11.4%）。9割弱はTailwind無しで動く計算です。貼り付け前の確認点が型ごとに違うため、まずどちらかを見分けます。

### 由来コメントの記法による型の判別

各ファイルの冒頭または `<style>` 内には、作者名とタグを記した由来コメントが入っています。この記法が型と完全に一致します。CSS版は `/* From Uiverse.io by … */` というCSSコメント形式で3,369件、Tailwind版は `<!-- From Uiverse.io by … -->` というHTMLコメント形式で433件。件数が型の内訳とぴったり重なるため、クラス名を読むより確実に判別できます。

### CSS版：同一ファイル内のstyleブロックごとの持ち込み

CSS型の要素は、マークアップと `<style>` ブロックが同じファイルに入っています。Buttonsカテゴリの実ファイルから、構造が分かる範囲を抜粋します。

```
<button class="cta">
  <span>Contact Us &nbsp;</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やグローバルスタイルシートへ切り出す前提で扱ってください。`padding: 11.5px 18px` や `border: 3px solid #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]` `z-[1]` は任意値（arbitrary values）です。貼り付け先のファイルがTailwindのスキャン対象に入っていなければ、クラスは生成されず見た目もまったく反映されない、という挙動になります。v3系なら設定ファイルのcontent、[設定方法が変わったTailwind CSS v4](/tech/details/5060/)ならCSS側で指定するソースの範囲に、貼り付け先が含まれているかを先に確認してください。複数のバリエーションを持たせて管理する段階に入ったら、[Tailwind Variantsによるバリアント管理](/tech/details/3773/)へ移すと崩れにくくなります。

## コピペ後に崩れる典型パターンと回避策

ここからはミラーの実ファイルを読むと見えてくる落とし穴です。プレビューでは正常に見えるのに自分のページで壊れる原因は、id属性とクラス名の扱いにほぼ集中しています。件数はごく少ないものの、見落とすと厄介なライセンスの同居も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>
```

HTMLのid属性は文書内で一意である必要があり、重複した場合 `for` 属性は文書順で最初に見つかったidを参照します。同じ要素を1ページに2つ貼ると、2つ目のスイッチをクリックしても1つ目が切り替わる、という症状になるわけです。ラジオボタンでは `name` の重複も同じ問題を起こし、別グループのはずの選択肢が相互排他になってしまいます。複製するときはid・for・nameを `switch-dark` のように一意な値へ振り直してください。

### .switch・.ctaなど汎用クラス名のグローバル衝突

CSS版の `<style>` はページ全体に効きます。そしてクラス名には短い一般語が使われています。実測では `class="switch"` が126件、`class="cta"` が5件、`radio-input` が41件（うち39件はRadio-buttonsカテゴリ）。同じクラス名を持つ別作者の要素を2つ貼れば、後から読み込まれた側のCSSが前の要素を上書きします。既存のCSSやBootstrapなどのフレームワークに同名クラスがある場合も同様です。

回避策は貼り付け時のリネームです。`.uv-cta` のようにプレフィックスを付けるか、CSS Modulesやスコープ付きスタイルの中へ入れてしまう。異なる作者の要素を2つ以上使うプロジェクトでこの作業を省くと、後から原因の切り分けに時間を取られます。

### 3,802件中1件だけ同梱されるFont Awesomeの帰属表示

全ファイルを走査したところ、Font Awesomeのアイコンが埋め込まれている要素は3,802件中1件だけでした（Toggle-switchesの1要素）。頻度は0.03%ですが、扱いを間違えるとライセンス違反になる種類の問題なので個別に挙げます。

この要素には、Font Awesome Free 6.5.1のSVGとともに `Copyright 2024 Fonticons, Inc.` という表記とライセンスページのURLが入っています。厄介なのはその残り方です。当該ファイルにHTMLコメント記号（`<!--` と `-->`）は1つも存在せず、コメント記号が剥がれた状態で `<svg>` 直下の生のテキストとして置かれています。行頭に `!` だけが残っているのが、元がコメントだった痕跡です。

Font Awesome Freeのライセンスは形式ごとに分かれており、リポジトリ同梱のLICENSE.txtに `# Icons: CC BY 4.0`、`# Fonts: SIL OFL 1.1`、`# Code: MIT License` の3節として明記されています。SVGアイコンはCC BY 4.0なので帰属表示が必要です。Font Awesome側は、配布ファイルに埋め込まれたコメントで帰属表示は足りると説明していますが、この要素ではそもそもコメントになっていません。テキストノードなので画面には表示されず、DOM操作や整形で気付かないうちに消える可能性があります。SVGを含む要素を使うなら、帰属表示を正しいコメントとして書き直すか、自社で用意したアイコンに差し替えるのが安全です。

## MITライセンスの範囲と帰属表示の実務

ミラーのLICENSEファイルは MIT License、著作権表示は `Copyright (c) 2023 Uiverse.io` です。MITなので商用利用・改変・再配布・販売まで認められ、条件は著作権表示とライセンス条文を複製物に含めることだけ。READMEでは、原作者とUiverse.ioへのクレジットについて「必須ではないが推奨」と書かれています。

実務上は、社内プロダクトに数点取り込む程度なら、リポジトリのNOTICEファイルなどにライセンス条文と出典URLをまとめて残す運用で足ります。判断が必要になるのは前節のFont Awesomeのように、要素の内側に第三者のアセットが混ざっているケースです。MITだから何も考えなくてよい、とはなりません。SVGやフォントを含む要素は個別にコメントを確認してください。

## Uiverseと紛らわしい同名サービスの切り分け

検索では「universe ui」「univer ui」「univers css」といった表記ゆれが多く、綴りが1文字違うだけで別のプロダクトに行き着きます。実際に検索から流入している名前を、npm registryの実データで切り分けます。

### @univerjs/ui（Univer）：表計算基盤のUI層

`@univerjs/ui` は実在するnpmパッケージで、最新版は0.25.1（2026年6月27日公開）、ライセンスはApache-2.0です。説明文は「Shared application UI framework, workbench services, menus, dialogs, and Facade UI APIs for Univer.」。Univerはブラウザ上で動く表計算・ドキュメントの基盤で、このパッケージはそのワークベンチUI層にあたります。コピペ用のUI要素集ではありません。

### npm universe-ui：2020年8月のalpha.95で停止

`universe-ui` というnpmパッケージも実在します。ただし最新版は 1.0.0-alpha.95 で公開日は2020年8月28日、ライセンスはISC。5年11か月にわたり更新のないalpha版で、新規プロジェクトの採用候補にはなりません。

`universe` というパッケージ名も埋まっています。こちらは0.8.1（2017年7月13日公開、Apache-2.0）で、説明は「The fastest way to query and explore multivariate datasets」。多変量データを扱うライブラリで、UIとは無関係です。GitHubには `universe-ui-library` のようにgalaxyのリポジトリ説明ごと複製したフォークも存在し、これが「universe」という綴りで検索される一因になっています。「universeという名前のUIライブラリは無い」というのは、同名のパッケージやリポジトリが存在しないという意味ではなく、UIライブラリとして流通しているものが無い、という意味です。

### Universe（onuniverse.com）とUnivers書体

Universeはモバイル起点でWebサイトやオンラインストアを作るノーコードのサービスで、公開したサイトは `xxx.onuniverse.com` というURLになります。開発者向けのUI部品とは無関係です。

もう一つ、「univers css」で探されているものにUnivers書体があります。Adrian Frutigerが1957年にDeberny & Peignot向けに設計した書体で、デジタル版はLinotypeが提供し、2010年にUnivers Nextへ改称されました。CSSで `font-family: Univers;` と書いても閲覧者の端末には基本的に入っていないため、Adobe Fontsなどのフォント配信サービスを契約してWebフォントとして読み込む必要があります。

## Uiverseを採用すべきでない場面

複数チームで長期保守するデザインシステムの土台には使わないでください。更新が自動で届かず、要素ごとに作者もCSSの書き方も命名規則もばらばらなので、取り込む数に比例して保守コストが上がります。土台にはパッケージ配布のコンポーネント集か、[Atomic Designのようなコンポーネント設計手法](/column/details/3256/)に沿った自前実装を置き、Uiverseはその上の装飾レイヤーに留めるのが妥当です。

キーボード操作やスクリーンリーダー対応が要件に入る画面でも、そのままの採用は避けます。実ファイルを見るとCheckboxesやToggle-switchesのように `input` と `label` を使った素直なマークアップの要素がある一方、`div` とCSSだけで見た目を組み立てた要素も混在しており、担保のレベルが要素ごとに違います。カテゴリ単位で安全と判断せず、採用する要素のマークアップを1つずつ読んでから決めてください。

いちばん向いているのはプロトタイプです。デザインの方向性を決める段階で貼って議論し、採用が固まったら自社のコンポーネントとして書き直す。LPの装飾や社内ツールのローダーのように、寿命が短く影響範囲の狭い箇所もそのまま使える範囲に入ります。書き直したコンポーネントを[Storybookと連携するChromatic](/tech/details/6969/)のような仕組みに載せておけば、貼り付け元が更新されない問題からも切り離せます。

## よくある質問

### 「universe ui」で出てくるUIライブラリは何ですか？

universeという名前のUIライブラリは流通していません。「universe ui」「ui universe」「uiuniverse」で探されているのは、綴りの近いuiverse.io（Uiverse）です。CSSまたはTailwindで書かれたUI要素をコピーして使うコミュニティサイトで、GitHubミラーは `uiverse-io/galaxy`。npmの `universe-ui` と `universe` は同名の別物で、それぞれ2020年8月・2017年7月から更新が止まっています。

### Uiverseはnpmでインストールできますか？

npmでは提供されていません。registryに `uiverse` という名前のパッケージは登録されておらず、レジストリAPIは404を返します。公式サイトの各要素ページでコードをコピーし、自分のプロジェクトに貼り付けて使う方式です。そのためバージョン指定も `npm update` による追随もできず、コピーした時点のコードが固定されます。更新を受け取り続けたい場合は、daisyUIのようにパッケージとして配布されるコンポーネント集を選んでください。

### Uiverseの要素は商用利用できますか？

できます。GitHubミラーのLICENSEはMIT License（Copyright (c) 2023 Uiverse.io）で、使用・改変・再配布・販売が認められています。原作者とUiverse.ioへのクレジットはREADMEで推奨されるにとどまり、必須ではないという扱いです。注意が要るのは、要素の中に第三者のアイコンが埋め込まれている場合です。Font Awesome FreeのSVGアイコンはCC BY 4.0で帰属表示が必要になり、Uiverse本体のMITとは別に条件がかかります。

### Tailwindを使っていなくても使えますか？

3,802件のうち3,369件はTailwindなしで動きます。要素はCSS版とTailwind版に分かれ、CSS版は同じファイル内のHTMLと `<style>` の2つをコピーするだけで完結する作りです。一方のTailwind版は `bg-[#3d3c3d]` のような任意値クラスを含むため、貼り付け先ファイルがTailwindのスキャン対象に含まれていないとスタイルが生成されません。由来コメントがCSSコメント形式なら前者、HTMLコメント形式なら後者と判別できます。

### GitHubのリポジトリをcloneすれば全要素が手に入りますか？

2024年9月2日以降に投稿された要素は入りません。`uiverse-io/galaxy` のmainブランチはその日のコミットが最後で、2026年8月時点まで更新されていません。cloneで得られるのは11カテゴリ3,802件です。最新のデザインは公式サイト側で探し、ミラーはライセンス条文の確認や過去要素の一括検索に使う、という切り分けが実態に合っています。

## 関連記事

- [daisyUIとは？Tailwind CSSコンポーネントの使い方とv5の設定変更【2026年版】](/tech/details/2987/)
- [Tailwind CSS v4の主な変更点と新機能の概要](/tech/details/5060/)
- [Tailwind Variants(tv)の使い方｜slots・compoundVariants・レスポンシブとTailwind CSS v4対応](/tech/details/3773/)
- [Atomic Designとは何か: コンポーネントベースのデザイン手法の概要](/column/details/3256/)
- [Chromaticとは何か？Storybook連携で広がるUI開発の可能性](/tech/details/6969/)

---

出典: [「universe ui」の正体はUiverse(uiverse.io)｜コピペCSS・Tailwind UI要素の実体とライセンス](<https://www.issoh.co.jp/column/details/2993/>)（株式会社一創）