既存のプロジェクトに shadcn を追加する方法

Web 開発者であれば、Radix UI に基づく最も人気のあるコンポーネント ライブラリの 1 つである shadcn/ui について聞いたことがあるでしょう。この投稿では、既存のプロジェクトに shadcn を追加する方法を検討します。

プロジェクトのセットアップ方法と使用しているフレームワークに応じて、既存のプロジェクトへの shadcn の追加方法は異なります。 shadcn を使用する場合 このライブラリを使用する場合は Typescript を推奨します。ただし、JavaScript バージョンも利用できます。

プロジェクトに shadcn を追加するには、まず Tailwind CSS をインストールする必要があります (プロジェクトで使用されていない場合)。shadcn コンポーネントのスタイルは Tailwind CSS で設定されるためです。

Tailwind CSS をセットアップするには、Web サイトのインストール手順に従ってください。

Shadcn とフレームワーク

Next.js、Vite、Remix、Astro、または Laravel を使用している場合は、shadcn-ui を実行して、次のコマンドでプロジェクトをセットアップします。

npx shadcn-ui@latest init

プロジェクトで使用しているものに関係なく、Typescript または Javascript を選択するなど、プロジェクトに応じてセットアップを完了するには、いくつかの質問に答える必要があります。

その後、ボタンを追加するなど、必要な shadcn コンポーネントをインストールできるようになります。

npx shadcn-ui@latest add button

その後、それをコンポーネント/ui からインポートしてプロジェクトで使用するだけです。

Shadcn 手動インストール

React プロジェクトなどに shadcn を手動で再度インストールするには、Tailwind CSS が正しくインストールされていることを確認してください。

次に依存関係を追加します:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

アイコンライブラリを追加:

npm install lucide-react

パス エイリアスの構成:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

tailwind.config.js を構成する

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

次のように globals.css ファイルを更新します:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

最後に cn ヘルパーを lib/utils.ts に追加します

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

次に、ここから目的のコンポーネントをインストールし、各コンポーネントの指示に従ってください。

以上です。現在、ほぼすべての Web プロジェクトで shadcn を使用しています。使い方とカスタマイズが簡単なため、非常に人気があります。Select コンポーネントと Scrollarea コンポーネントからカスタム shadcn-date-picker コンポーネントを作成した方法を確認してください。こちら。

このライブラリをプロジェクトに追加する際に問題が発生した場合は、お知らせください。

x.com でつながりましょう

以上が既存のプロジェクトに shadcn を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。