11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vue.js 3 対応 UIコンポーネント集s

11
Last updated at Posted at 2022-04-02

はじめに

※ この文章はベータ版です。

コンポーネント集

Tailwind CSS ベース

Reka UI ← Radix Vue

Radix Primitives の Vue.js 非公式ポート?

最新バージョン: 2.9.6

Nuxt UI

Tailwind CSS & Reka UIベースのコンポーネント集。

最新バージョン: 4.7.0

shadcn-vue

shadcn/ui の Vue.js 非公式ポート。

Tailwind CSS & Reka UI ベース。

最新バージョン: 2.6.2

mapcn-vue

mapcnの Vue.js非公式ポート

最新バージョン: 0.1.0

ElevenLabs UI Vue

音声に特化?したshadcn-vueベースのコンポーネント集。
elevenlabs-uiの Vue.js非公式ポート。

最新バージョン: 0.1.4

Base UI Vue

Base UI のVueポート

新バージョン: 0.2.0 (開発中)

Vue Bits

Tailwind CSS ベースのコンポーネント集

Inspira UI

Tailwind CSS ベースのコンポーネント集

Frappe UI

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

最新バージョン: 0.1.277

UI Thing

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

最新バージョン: ???

Headless UI

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

ヘッドレスですが、Tailwind CSSとの組み合わせが主なので、こちらに分類しています。

最新バージョン: 1.7.23

Vueless UI

Tailwind CSS ベースのコンポーネント集

最新バージョン: 1.4.7

Storefront UI

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

最新バージョン: 3.1.1

Indie Layer UI

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

最新バージョン: 1.17.0

Euqal UI

Tailwind CSS ベースのコンポーネント集。

最新バージョン: 0.93.0

Akaza UI

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

ヘッドレスですが、Tailwind CSSとの組み合わせが主なので、こちらに分類しています。

最新バージョン: 0.0.2-alpha (開発中)

マテリアル・デザイン

Vuetify

マテリアル・デザインを採用したコンポーネント集。
汎用のCSSフレームワークを採用しておらず、自前の CSS(フレームワーク?)を採用。
(内部的には、ソースコードレベルでCSSファイルとして分離しています。)

Tailwind CSS / Uno CSS 用のプリセットが用意されていて、これらと組み合わせて利用することが可能です。

CSS Layersによる競合防止:
Vuetifyのスタイルは専用のレイヤー(@layer)に配置されるため、Tailwind/のユーティリティクラスはVuetifyのコンポーネントスタイルに上書きされることなく共存できます。

最新バージョン: 4.0.6

VARLET

マテリアル・デザインを採用したコンポーネント集。
汎用のCSSフレームワークを採用しておらず、自前の CSSを採用。
(内部的には、ソースコードレベルでCSSファイルとして分離しています。)

Tailwind CSS / Uno CSS 用のプリセットが用意されていて、これらと組み合わせて利用することが可能です。

最新バージョン: 3.15.1

Quasar Framework

マテリアル・デザインを採用したコンポーネント集。
汎用のCSSフレームワークを採用しておらず、自前の CSS(フレームワーク?)を採用。
(内部的には、ソースコードレベルでCSSファイルとして
分離しています。)

最新バージョン: 2.19.3

BalmUI

マテリアル・デザインを採用したコンポーネント集。

最新バージョン:10.31.2

複数CSSフレームワーク対応

PrimeVue

複数のCSSフレームワーク対応のコンポーネント集。
CSSフレームワークへの対応は、テーマの形で分離されている模様。
現在、Bootstrap / TailwindCSS / Material の テーマが提供されています。

最新バージョン: v4.5.5

Volt

PrimeVue ベースの UI コンポーネントライブラリ

Bootstrap ベース

BootstrapVueNext

Bootstrap5 (CSSフレームワーク)ベースのコンポーネント集。

最新バージョン: 0.44.7

Bulmaベース

Buefy

Bulma (CSSフレームワーク)ベースの
コンポーネント集。

3.0.0 以降、Bulma 1.0.xベース、
1.0.2 以前、Bulma 0.9.4ベース、
となっています。

原作者により、Vue 3.x に対応しないことが宣言→
PJのリーダー?が交代し、下記リポジトリ(公式フォーク)にて3.x対応が開始 → リリース

最新バージョン: v3.0.5

UnoCSS ベース

Oku Primitives

UnoCSS (CSSライブラリ)ベースのコンポーネント集

最新バージョン: v0.7.8

Onu UI (WIP)

UnoCSS (CSSライブラリ)ベースのコンポーネント集

最新バージョン: v1.1.5

Una UI

UnoCSS (CSSライブラリ)ベースのコンポーネント集

最新バージョン: v0.67.4

Panda CSSベース

Park UI

Ark UI & Panda CSS ベースの
コンポーネント集。

現在のバージョン: 0.43.1

独自デザイン

Element Plus

独自デザイン?を採用したコンポーネント集。

Element UI (Vue.js2.x用)の後継。

gogo code migration tool というElement UIからの
移行補助ツールがあります。

最新バージョン: v2.13.7

Maz-UI

独自デザイン?を採用したコンポーネント集。
他のコンポーネント集とコンフリクトすることなしに使える模様。

最新バージョン: 4.9.3

Orion

独自デザイン?を採用したコンポーネント集。

最新バージョン: 2.2.1

Vuestic UI

独自デザイン?を採用したコンポーネント集。
他のコンポーネント集とコンフリクトすることなしに使える模様。

最新バージョン: v1.10.3

Ionic Framework

独自デザイン?を採用したコンポーネント集。

最新バージョン: 8.8.4

BEEQ Design System

独自デザイン?を採用したコンポーネント集。

最新バージョン: 1.12.3

onyx

独自デザイン?を採用したコンポーネント集。

最新バージョン: 1.12.0

Shopify Polaris Vue

独自デザイン?を採用したコンポーネント集。

最新バージョン: 2.1.34

Inkline

独自デザイン?を採用したコンポーネント集。

最新バージョン: 4.7.2

Roughness

手書き風独自デザイン?を採用したコンポーネント集。

最新バージョン: 0.2.0

Quail UI

独自デザイン?を採用したコンポーネント集。

最新バージョン: 0.7.0

Onsen UI

独自デザイン?を採用したコンポーネント集。

最新バージョン: 2.12.8

デジタル庁デザインシステム Vue.js

デジタル庁が公開しているデザインシステムのVue.js実装

最新バージョン: 0.0.2-beta?

vue-data-ui

データ・ビジュアライゼーションに特化したコンポーネント集。

最新バージョン: 3.17.13

CSSフレームワーク非依存

Vuetify 0

特定のCSSフレームワークに依存しない?コンポーネント集。

Vuetifyの基盤として開発中。

最新バージョン: 0.2.1

Ark UI

特定のCSSフレームワークに依存しない?コンポーネント集。

最新バージョン: 5.36.2

NuxtLego

特定のCSSフレームワークに依存しない?コンポーネント集。

最新バージョン: 0.0.14

Oruga

特定のCSSフレームワークに依存しないコンポーネント集。

CSSフレームワークへの対応は、テーマの形で分離されています。
現在、Bulmaテーマ、Bootstrapテーマ、Orugaテーマが
提供されています。

Buefy の作者による Buefy の後継プロジェクト。

最新バージョン: v0.12.6

VueTailwind

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

現在のバージョン: 未対応 (v3.x で対応予定)

BootstrapVue

Bootstrap4 (CSSフレームワーク)ベースのコンポーネント集。

現在のバージョン: 未対応(対応なし)

リンク

番外: UIコンポーネント集 (CSS(& Vanilla JS))

TailwindCSS ベース

daisyUI

Tailwind CSS ベースのコンポーネント集。

最新バージョン: 5.5.19

Basecoat

Tailwind CSS ベースの shadcn/ui を意識したコンポーネント集。

最新バージョン: 0.3.11

Flowbite

Tailwind CSS ベースのコンポーネント集。

最新バージョン: 4.0.1

最新バージョン: 0.2.3

Preline UI

最新バージョン: 4.1.3

Tailwind CSS (CSSフレームワーク)ベースのコンポーネント集。

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?