shadcn-vueとは？Vue Open-code UI Components

ページ内ナビ

概要

shadcn-vue 2.8.2はshadcn/uiのVue portで、完成済みcomponent packageをblack boxとして利用するのではなく、CLIでcomponent sourceをprojectへ追加してcustomizeするopen-code modelです。Reka UIをprimitive layerとして使い、Tailwind CSSと組み合わせてUIを構築できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

CLIからcomponent sourceをprojectへ追加する

shadcn-vue addは選択したcomponentと必要dependencyをprojectへ追加します。生成されたcodeはapplication側で直接編集できます。

出典：[2][1]

create/initでVue projectとdesign system設定をbootstrapする

CLIはNuxt、Vite、Vite + Vue Routerのproject作成、Tailwind CSS設定、base/style/icon/fontの選択を含むcreateとinit workflowを提供します。

出典：[2]

registryからcomponentを解決し、2.8.2ではpublic GitHub repositoryも参照できる

2.8.2ではCLIがpublic GitHub repository上のregistry itemを解決できるようになり、標準registry以外のcomponent配布にも広げられています。

出典：[4]

向いている用途

component libraryの見た目と実装をproject側で完全にcontrolしたい場合に向く

既製UI libraryのAPIへ長期依存するより、sourceを所有してdesign token、markup、interactionをproduct要件に合わせて変更したいteamに適します。

出典：[1]

導入前の確認

生成codeを自分で保守するためupgradeはpackage更新だけでは完結しない

component sourceがprojectへcopyされるmodelなので、upstreamの改善やbreaking changeを取り込むにはlocal codeとの差分確認が必要です。

出典：[1][2]

2.8.2はDrawerをReka UIへ移行しData TableをTanStack Table v9へ更新する

2.8.2にはDrawerのReka UI移行というbreaking changeと、Data TableのTanStack Table v9移行が含まれます。該当componentを既に生成済みの場合はmigration差分を重点的に確認してください。

出典：[4]

参考にした公式資料

[1]shadcn-vue v2.8.2 README(2026-10-05)
[2]shadcn-vue CLI documentation(2026-10-05)
[3]shadcn-vue 2.8.2 CLI package metadata(2026-10-05)
[4]shadcn-vue v2.8.2 release(2026-10-05)
[5]shadcn-vue MIT license(2026-10-05)

編集部からの補足

shadcn-vueは通常のruntime component packageをimportし続ける方式ではなく、CLIでcomponent sourceをprojectへ追加して自分で保守するモデルです。upgrade時は生成済みcodeとの差分確認が必要です。

3ステップで試す

1
shadcn-vue CLI 2.8.2を固定して導入する
既存projectを変更せず、一時npm projectへreview対象CLIを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/shadcn-vue.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-dev --save-exact shadcn-vue@2.8.2
2
CLI package versionを確認する
導入したCLIがreview対象versionであることを確認します。
test "$(node -e "console.log(require('shadcn-vue/package.json').version)")" = '2.8.2'
3
CLI command一覧を確認する
create・init・add等を実行せず、CLIが起動できることだけを確認します。
npx shadcn-vue --help >/dev/null

公式READMEで確認

成長

成長の推移 · 直近30日

10,663 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 5
Open PR: 18

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

accessible
radix-vue
shadcn
shadcn-ui
ui-kit
ui-library
vue
vue-ui-kit
component-library
reka-ui

Stars: 10,663
Forks: 681
Watchers: 36
Open Issues: 127
Contributors: 230
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/04