Agile育成ブログ
未来を変える喜びを
未分類

shadcn

 

shadcn とは、UI コンポーネントの構築を簡単にするためのフレームワークやツールセットで、多くの場合、React や Tailwind CSS と組み合わせて使われます。主に、デザインシステムを統一するための柔軟な方法を提供し、カスタマイズ可能な UI コンポーネントを迅速に作成することを目的としています。

以下は shadcn の特徴、使い方、およびその利点についての詳細です。

特徴

  1. 再利用可能なコンポーネント:
    • よく使われる UI コンポーネント（ボタン、モーダル、フォーム、テーブルなど）が事前に用意されています。
    • これらのコンポーネントはプロジェクト全体で簡単に再利用可能。
  2. Tailwind CSSとの統合:
    • コンポーネントは Tailwind CSS をベースに設計されており、デザインのカスタマイズが非常に簡単。
  3. カスタマイズ性:
    • shadcn のコンポーネントはデフォルトのスタイルを持ちつつ、必要に応じて簡単に拡張や変更が可能。
    • カスタムデザインシステムを作成する場合に便利。
  4. アクセシビリティ:
    • すべてのコンポーネントは、ARIA 属性やキーボード操作に対応しており、アクセシビリティが考慮されています。
  5. モジュール式のアプローチ:
    • 必要なコンポーネントだけをインポートする軽量アプローチが可能。
    • 全てのコンポーネントがツリーシェイキングに対応。

よく使われるシナリオ

  1. ダッシュボードの構築:
    • ボタン、フォーム、カード、モーダルなど、管理画面やダッシュボード向けの UI を迅速に構築。
  2. カスタムデザインシステム:
    • プロジェクトのブランディングに合わせたデザインシステムを構築するための基盤。
  3. アクセシブルなアプリケーション:
    • アクセシビリティ要件に準拠した UI コンポーネントの作成。

インストール方法

shadcn は通常、npm または yarn を使ってプロジェクトに追加します。

  1. shadcn のセットアップbashコードをコピーするnpm install @shadcn/ui
  2. Tailwind CSS のセットアップ（必要に応じて）
    • Tailwind CSS が既にプロジェクトに導入されていない場合は、以下を実行します：bashコードをコピーするnpm install -D tailwindcss postcss autoprefixer npx tailwindcss init
  3. Tailwind の設定ファイルを編集: Tailwind CSS の tailwind.config.js に必要な設定を追加します。javascriptコードをコピーするmodule.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

サンプルコード

以下は、shadcn を使ったシンプルなボタンコンポーネントの例です：

Button コンポーネント

javascriptコードをコピーするimport { Button } from "@shadcn/ui";

export default function App() {
    return (
        <div className="p-4">
            <Button variant="primary">Click Me</Button>
        </div>
    );
}

カスタマイズ例

javascriptコードをコピーする<Button variant="secondary" className="bg-red-500 hover:bg-red-700">
    Custom Button
</Button>

利点

  1. 時短:
    • ゼロから UI コンポーネントを作成する必要がなく、開発時間を大幅に短縮。
  2. 一貫性:
    • Tailwind CSS ベースで、全体的なデザインの一貫性を保つ。
  3. 簡単なカスタマイズ:
    • プロジェクトのニーズに合わせてスタイルや機能を自由に変更可能。
  4. オープンソース:
    • コミュニティが活発で、ドキュメントやサポートが豊富。

注意点

  • Tailwind CSS を使い慣れていないと学習コストがかかる可能性あり。
  • プロジェクト規模によっては、shadcn のようなフレームワークが不要な場合も。

New York を選択した場合:
shadcn が提供する Apple-inspired スタイルがすぐに使える状態でプロジェクトに適用されます。

default を選択した場合:
必要最低限のベーススタイルのみが提供され、開発者が自由にスタイルを作り込む必要があります。

カラーパレットは、プロジェクトの雰囲気や目的に応じて選択しましょう。

  • Neutral: シンプルで汎用的な配色。
  • Gray: バランスの取れたスタンダードなグレー。
  • Slate: 青みがかり、モダンで高級感のある配色。
  • Stone: Slate よりも暖かみのあるグレー。柔らかい印象のカラーパレット。
  • Zinc: Slate と Gray の中間的な色調。クールでもなく暖かすぎないバランスの取れたトーン。
RELATED POST