웹 개발자라면 Radix UI 기반의 가장 인기 있는 구성 요소 라이브러리 중 하나인 shadcn/ui에 대해 들어보셨을 것입니다. 이번 게시물에서는 기존 프로젝트에 shadcn을 추가하는 방법을 살펴보겠습니다.
프로젝트 설정 방법과 사용 중인 프레임워크에 따라 기존 프로젝트에 shadcn을 추가하는 방법은 달라집니다. shadcn을 사용할 때 이 라이브러리를 사용할 때는 Typescript를 사용하는 것이 좋습니다. 그럼에도 불구하고 JavaScript 버전도 사용 가능합니다.
프로젝트에 shadcn을 추가하려면 프로젝트에서 사용하지 않는 경우 먼저 Tailwind CSS를 설치해야 합니다. 왜냐하면 shadcn 구성 요소의 스타일이 이 CSS로 지정되기 때문입니다.
Tailwind CSS를 설정하려면 웹사이트의 설치 지침을 따르세요.
Next.js, Vite, Remix, Astro 또는 Laravel을 사용하는 경우 shadcn-ui를 실행하여 다음 명령으로 프로젝트를 설정하세요.
npx shadcn-ui@latest init
프로젝트에 따라 설정을 완료하려면 몇 가지 질문에 답해야 합니다. 예를 들어 프로젝트에서 사용하는 Typescript나 Javascript를 선택해야 합니다.
나중에 원하는 shadcn 구성 요소를 설치할 수 있습니다(예: 버튼 추가).
npx shadcn-ui@latest add button
그런 다음 구성 요소/UI에서 가져와서 프로젝트에 사용하세요.
예를 들어 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에 접속해 보세요
위 내용은 기존 프로젝트에 shadcn을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!