Node.jsのインストール

node -v

上記でnode.jsのバージョンを確認します。バージョンが表示されない場合は以下からインストールします。

Next.jsのプロジェクト作成

npx create-next-app@13 shadcnui-app

上記を実行後、以下のように設定します。
重要な箇所は、「Tailwind CSS」の箇所です。shadcn/uiはtailwind cssを利用するため、yesと設定します。

上記が完了したら作成したshadcnui-appに移動し、サーバーを起動します。

cd shadcnui-app

npm i

npm run dev

以下のようになればNext.jsの準備は完了です。

shadcn/uiの導入

npx shadcn@latest init

上記を実行後、以下のように設定します。

これでshadcn/uiの導入は完了です。
コンポーネントをインストールしてみましょう。

コンポーネントのインストール

インストールするコンポーネントは何でもいいです。本記事ではaccordionをインストールします。

npx shadcn@latest add accordion

上記を実行するとcomponentsディレクトリ配下にuiフォルダが作成され、その中にアコーディオンで必要なshadcn/uiのコードが自動で格納されます。

page.tsxでアコーディオンを使っていきます。

page.tsx

import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";
export default function Home() {
	return (
		<main className="flex min-h-screen flex-col items-center justify-between p-24">
			<Accordion type="single" collapsible>
				<AccordionItem value="item-1">
					<AccordionTrigger>こんにちはアコーディオン</AccordionTrigger>
					<AccordionContent>どうもどうも、アコーディオンです</AccordionContent>
				</AccordionItem>
			</Accordion>
		</main>
	);
}

実行画面

以上で完了です。他にもコンポーネントは複数あるため、ぜひ使ってみてください。

おまけ

個人的にshadcn/uiはとても気に入っています。
理由としては何といってもtailwind cssでカスタマイズが効く点です。

UIコンポーネントライブラリのデメリットとしてUIのカスタマイズがそこまで柔軟ではないことが挙げられると思います。
shadcn/uiはこの点を払拭てくれたので感謝です。

また、UIコンポーネントライブラリとして有名なMaterial UIやchakura UIと比較しnpm依存が少なく軽量です。

まだ多くのサービスで使われているわけではないと思いますが、今後も目が離せないライブラリの一つですね★