🗞️

2025 年、なぜ私は Headless UI を選ぶのか

に公開
Nuxt
React
Tailwind CSS
frontend
shadcn/ui
idea

はじめに

フロントエンド開発における大きな課題のひとつは、「開発スピード」と「デザインの自由度」をどう両立するか です。従来の 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 の発展に大きな期待を寄せています。

Discussion