なぜshadcn/uiは支持されたのか ― Providerモデル以後のUI設計

BRANK

shadcn/uiとはshadcn/uiはRadix UIが提供するスタイルを持たないHeadless UIコンポーネント群(Radix Primitives)をベースに、Tailwind CSSを用いてデザインされた「コンポーネントのテンプレート集」である。公式サイトには次のように記されている。This is not a component library.It is how you build your component library.(これはコンポーネントライブラリではない。あなた自身がコンポーネントライブラリを構築するための方法である)shadcn/ui は、npm パッケージとして完成された UI コンポーネントを提供するのではなく、コードそのものをプロジェクトに取り込み、所有するという前提に立っている点が特徴的だ。このアプローチが具体的にどのような意味を持つのかについては後のセクションで触れる。本記事の目的は、shadcn/uiが支持を集めた背景を整理することにある。単なる「便利なUIライブラリの流行」としてではなく、2023年にNext.js v13がApp Routerを採用して以降の一連の変化を含めた「パラダイムの転換」として捉える必要があると感じたためだ。Page RouterとProviderNext.js は 2016 年頃から、Reactとほとんど同じ使用感のままSSR（サーバーサイドレ…