はじめに
フロントエンド開発における大きな課題のひとつは、「開発スピード」と「デザインの自由度」をどう両立するか です。従来の UI ライブラリ（Material UI や Ant Design など）は、確かに開発効率を大きく向上させてくれました。しかし、その一方で次のような問題もあります。
-
強いデフォルトスタイルにより、
!importantや CSS 上書きの泥沼にハマる - フレームワークの「見た目」に縛られ、ブランド独自のデザインを実現しづらい
- 完全に使わない場合は、開発効率が大幅に低下
こうした背景の中で、Tailwind CSS の普及とともに注目されているのが Headless UI というアプローチです。
今回は、私が2025年に実際に試した Nuxt UI と shadcn/ui の2つの選択肢を比較しながら、Headless UI の魅力を整理します。
Nuxt UI：設定ベースでの柔軟性
まず押さえておきたいのは、 Nuxt UI は Headless UI ライブラリではないという点です。
Nuxt UI は、Headless UI（※v3 以降は Reka UI に移行）と Tailwind CSS をベースにした「スキン付き（Skinned）」コンポーネントライブラリです。
従来との違い
- 従来の UI ライブラリ：CSS を上書きしてデザインを変更
-
Nuxt UI：
app.config.tsで Tailwind クラスを設定して変更
例：ボタンのスタイルを変更
// app.config.ts
export default defineAppConfig({
ui: {
button: {
variant: {
solid: 'shadow-sm bg-primary text-white hover:bg-primary-600',
outline: 'ring-1 ring-inset ring-primary text-primary hover:bg-primary-50'
}
}
}
})
もちろん、Nuxt UI は app.config.ts を編集してカスタマイズできるだけでなく、各コンポーネントには ui プロパティがあり、さらにすべてのコンポーネントに slot が用意されているので、子コンポーネントの内容を自由に差し替えることもできます。これもかなり便利なポイントです。
Nuxt UI は最近 4.0 にアップデートされ、コンポーネントの数が大幅に増えました。現在の Nuxt 4 との開発体験もとても良いです。以前は Nuxt.js プロジェクト専用でしたが、今では Vue プロジェクトでも利用できます。また、Nuxt UI は Figma との連携も可能です。もし UI のカスタマイズをそこまで必要としないなら、私は Nuxt UI を選ぶと思います。
shadcn/ui：コード所有権という自由
shadcn/ui は、Headless UI の理念を徹底的に体現しています。
npm install はできません。 代わりに、CLI でコンポーネントのソースコードをプロジェクトにコピーします。
構成要素
- Radix UI：アクセシビリティや複雑な UI ロジックを担当
- Tailwind CSS：スタイルを担当
特徴
-
コード所有権：
components/ui/button.tsxは完全に自分のもの -
設定不要：
rounded-mdをrounded-fullに変えるだけで OK - 抽象化の壁がない：React/Vue + Tailwind + Radix さえ理解していれば十分
なぜ Headless UI が未来なのか？
抽象化コストの排除
従来の UI ライブラリは、学習コストや「抽象の壁」が避けられません。shadcn/ui では、コード＝自分の資産なので、その壁が存在しません。
責務の明確な分離
- Radix UI：複雑な UI ロジックとアクセシビリティ
- Tailwind CSS：スタイル定義
- 開発者：ビジネスロジックとデザイン
この分離により、UI の見た目と動作を完全にコントロールできます。
チーム開発に強い
新しいメンバーは巨大なライブラリのドキュメントを読む必要がありません。components/ui ディレクトリを見れば、どのように実装されているか一目で理解できます。コンポーネント構造が明示的で、チーム全体の保守性が向上します。
パフォーマンス最適
- 必要なコンポーネントだけをコピーするため、無駄なコードがない
- Radix + Tailwind は軽量かつ高速に動作
結論
私はもともと Tailwind が大好きで、もう5年近く使っています（機会があれば、この話も記事にしたいと思っています）。
そして、Tailwind ベースの UI フレームワークは今後さらに人気が高まると信じています。
Nuxt UI も悪くない選択肢です。開発体験を大きく向上させてくれます。
ただ、shadcn/ui が示す Headless モデルは、より深いレベルの課題を解決していると感じます。
もし会社に専任の UI デザイナーがいて、自社のブランドに合った独自のデザインを実現したいなら、この Headless UI アプローチを使うことで、開発効率を維持しながらデザインの一貫性を保つことができます。
一方で、非 Headless UI は、作者が提供する API の範囲でしか変更できず、本当のソースコードは node_modules の中に隠れたままです。
しかし、shadcn のような Headless UI は、ソースコードを直接プロジェクトに取り込み、完全に自分たちでコントロールできます。
この違いによって、開発体験もプロダクト体験も、従来の UI コンポーネントモデルよりはるかに優れたものになります。
だからこそ、私は 2025 年の今も、Headless UI の発展に大きな期待を寄せています。