Shadcn/UI 入門：React で洗練された UI コンポーネントを作る

  • 投稿日
  • 更新日
  • 著者 IF233
  • カテゴリー Next.js
  • カテゴリー React

こんにちは！ 今回は、React のプロジェクトで洗練された UI コンポーネントを簡単に作成できる「shadcn/ui」について紹介します。Web 開発をしていると「もっとスタイリッシュなコンポーネントを作りたいけど、手間がかかるなあ…」と感じたことはありませんか？Shadcn/ui はそんな悩みを解決してくれる強力なツールです！

Shadcn/UI って何？

shadcn/ui は、React や Next.js プロジェクトに簡単に統合できる UI コンポーネントライブラリです。このツールは、デザインの美しさと使いやすさに重点を置いており、あらかじめスタイリングされたコンポーネントが豊富に揃っています。デフォルトで美しいスタイルを持っているので、開発者はデザインに悩まずに素早くページを作成できます。

特徴

  • 洗練されたデザイン：すぐに使える美しいデザインが標準で搭載。
  • カスタマイズ性：基本スタイルを維持しつつ、自分のプロジェクトに合わせて簡単に調整可能。
  • 開発スピード向上：手間をかけずに UI を組み込めるので、実装にかかる時間を大幅に短縮。

Shadcn/UI を使ってみる

それでは、実際に Shadcn/UI をインストールし、React プロジェクトに組み込んでみましょう。以下では、インストールから基本的な使用方法までを説明します。

1. インストール

まず、以下のコマンドを使って Shadcn/UI をインストールします。

npm install shadcn-ui

インストールが完了したら、React または Next.js プロジェクトに shadcn/ui をインポートして使えるようになります。

2. 基本的な使い方

例えば、ボタンコンポーネントを作りたい場合、以下のように Button コンポーネントを使います：

import { Button } from 'shadcn-ui';

function App() {
  return (
    <div>
      <Button onClick={() => alert("ボタンがクリックされました！")}>クリック！</Button>
    </div>
  );
}

export default App;

このコードを実行すると、下のような美しいボタンが表示されます。

3. コンポーネントのカスタマイズ

shadcn/ui のコンポーネントは、カスタマイズも簡単です。例えば、ボタンの色を変えたり、サイズを調整する場合、Button コンポーネントのプロパティを設定するだけで見た目を変更できます。

<Button color="primary" size="large">カスタムボタン</Button>

おすすめのコンポーネント

Shadcn/UI には、ボタン以外にも以下のような便利なコンポーネントが用意されています：

  1. カード (Card)
    コンテンツを整理して表示するのに最適。
  2. モーダル (Modal)
    ポップアップウィンドウを簡単に追加可能。
  3. トグル (Toggle)
    スイッチのようなオンオフの切り替え UI。

カスタムテーマの設定

Shadcn/UI では、デフォルトのテーマをプロジェクトに合わせて変更することもできます。カスタムテーマの設定は以下のように行います：

import { ThemeProvider } from 'shadcn-ui';

function App() {
  return (
    <ThemeProvider theme="dark">
      <Button>ダークテーマボタン</Button>
    </ThemeProvider>
  );
}

まとめ

shadcn/ui は、React や Next.js のプロジェクトでおしゃれで使いやすい UI を簡単に構築できる強力なツールです。デザインに時間をかけずにプロジェクトの UI を整えたい方に特におすすめです。興味のある方はぜひインストールして試してみてください！