웹 개발자라면 Radix UI 기반의 가장 인기 있는 구성 요소 라이브러리 중 하나인 shadcn/ui에 대해 들어보셨을 것입니다. 이 게시물에서는 기존 프로젝트에 shadcn을 추가하는 방법을 살펴보겠습니다.

프로젝트 설정 방법과 사용 중인 프레임워크에 따라 기존 프로젝트에 shadcn을 추가하는 방법이 달라집니다. shadcn을 사용할 때 이 라이브러리를 사용할 때는 Typescript를 사용하는 것이 좋습니다. 그럼에도 불구하고 JavaScript 버전도 사용 가능합니다.

먼저 프로젝트에 shadcn을 추가하려면 프로젝트에서 사용하지 않는 경우 Tailwind CSS를 설치해야 합니다. shadcn 구성 요소의 스타일이 이 CSS로 지정되기 때문입니다.

Tailwind CSS를 설정하려면 해당 웹사이트의 설치 지침을 따르세요.

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;
  }
}

마지막으로 lib/utils.ts에 cn 도우미를 추가하세요.

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

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

그런 다음 여기에서 원하는 구성 요소를 설치하고 각 구성 요소에 대한 지침을 따르세요.

그게 다입니다. 저는 현재 거의 모든 웹 프로젝트에서 shadcn을 사용하고 있습니다. 사용 및 사용자 정의가 매우 쉽기 때문에 매우 유명해졌습니다. Select 및 Scrollarea 구성 요소에서 사용자 정의 shadcn-date-picker 구성 요소를 만든 방법을 확인하세요. 여기.

이 라이브러리를 프로젝트에 추가하는 데 문제가 있으면 알려주세요.

x.com에 연결해 보세요