Next.jsでReact向けのUIコンポーネントセットshadcn/uiを導入する方法

概要

shadcn/uiは、Reactアプリケーション向けのUIコンポーネントセットで、特にTailwind CSSとRadix UIを組み合わせて使用することを前提としています。このライブラリはデフォルトのスタイルを持たず、プロジェクトのデザイン要件に応じて自由にスタイリングできることが特徴です。この記事では、ReactとNext.jsプロジェクトにshadcn/uiを導入する方法を手順を追って説明していきます。

shadcn/uiのコンポーネント例

※ 画像はshadcn.com/themesより

shadcn/uiの特徴

1. Tailwind CSSとの統合

shadcn/uiはTailwind CSSを前提としており、スタイルのカスタマイズ性と軽量さを両立。スタイルやデザインに関する効率的な設定が可能で、テーマ設定やレスポンシブ対応が容易です。

2. コンポーネントの豊富さ

shadcn/uiには、ボタンやフォーム、モーダルといった基本的なUIコンポーネントが多く含まれており、アプリケーション開発に必要な要素が網羅されています。

3. アクセシビリティ

shadcn/uiはアクセシビリティ（a11y）に配慮して設計されており、支援技術（スクリーンリーダーなど）に対応したコンポーネントが多くあります。特に、フォームやナビゲーション関連の要素はアクセシビリティを意識した実装になっています。

4. デザインの一貫性

Tailwind CSSとの連携により、デザインの一貫性を保ちながら柔軟にカスタマイズが可能です。また、個々のコンポーネントが統一されたデザインシステムに基づいているため、アプリ全体でのデザイン統一が容易です。

5. 柔軟なカスタマイズ性

プリセットのスタイルに加えて、Tailwindを使用してスタイルを自由に変更できるため、カスタムテーマの作成がしやすく、各プロジェクトのブランドに応じたUIデザインを実現しやすいです。

shadcn/uiの導入手順

1. プロジェクトの作成

まずはNext.jsプロジェクトを作成します。ターミナルを開き、以下のコマンドを実行してください。

npx create-next-app@latest my-shadcn-app
cd my-shadcn-app

2. shadcnのインストール

次に、shadcnをインストールします。プロジェクトディレクトリで以下のコマンドを実行します。

npx shadcn@latest

インストール中にいくつか質問されます。それぞれの質問に対して、下記のように回答します。

• Pick a framework: Next.js を選択します
• Pick a styling option: Tailwind CSS を選択します
• Do you want to customize the shadcn components?: カスタマイズを行わない場合は No を選択します。カスタマイズを行う場合は Yes を選択し、表示される指示に従ってください。 この記事では、No を選択した場合を解説します
• カラーはこちらのshadcn.com/themesサイトから確認できます

3. コンポーネントの追加

shadcnのインストールが完了したら、必要なコンポーネントを追加します。今回は、Button と Label コンポーネントを使用してみたいと思いますので、以下のコマンドをそれぞれ実行します。

npx shadcn@latest add button
npx shadcn@latest add label

これらのコマンドを実行すると、src/components ディレクトリ（存在しない場合は自動的に作成されます）にコンポーネントのファイルが追加されます。

4. コンポーネントの利用

追加したコンポーネントを実際に使用してみましょう。app/page.tsx を以下のように編集します。

"use client";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };


  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <h1 className="text-3xl font-bold p-24">Hello, Next.js + shadcn/ui </h1>
      <div className="flex flex-row gap-4 items-center"> {/* items-centerを追加 */}
        <Button onClick={handleDecrement}>-</Button>
        <Label>{count}</Label> {/* Labelでcountの値を表示 */}
        <Button onClick={handleIncrement}>+</Button>
      </div>
    </main>
  );
}

5. アプリケーションの実行

変更を保存し、ターミナルで以下のコマンドを実行してアプリケーションを起動します。

npm run dev

ブラウザで http://localhost:3000 にアクセスすると、簡易的なカウンターのWebページが表示されます。
このように、ボタンを押してカウンターのラベルが増減することを確認できます。

まとめ

shadcn/uiを使うことで、比較的簡単にコンポーネントを利用することができます。
shadcn/uiは、スタイリングの自由度とアクセシビリティに配慮したReact向けUIライブラリであり、Tailwind CSSやRadix UIの知識がある開発者にとって、カスタマイズしやすいツールです。
デフォルトのスタイルはありますが、あくまで基本的なもので、カスタマイズのしやすさを重視したシンプルなものです。言い換えると、カスタマイズ性が高いため、特定のデザイン要件やブランドガイドラインに沿った外観への変更が容易になります。