๐Ÿ’ก ์ƒˆ๋กœ ์•Œ๊ฒŒ ๋œ ๊ฒƒ

shadcn/ui ์™„๋ฒฝ ๊ฐ€์ด๋“œ

์†Œ๊ฐœ

shadcn/ui๋Š” ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ Radix UI์™€ Tailwind CSS๋กœ ๊ตฌ์ถ•๋œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ๋ชจ์Œ์ž…๋‹ˆ๋‹ค. ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์•ฑ์— ์ง์ ‘ ๊ฐ€์ ธ๋‹ค ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.

ํ•ต์‹ฌ ํŠน์ง•

1. ์Šคํƒ€์ผ๋ง ์ ‘๊ทผ๋ฐฉ์‹

2. ๊ตฌ์„ฑ ์š”์†Œ

3. ์„ค์น˜ ๋ฐฉ๋ฒ•

# 1. ํ”„๋กœ์ ํŠธ์— ํ•„์š”ํ•œ ๊ธฐ๋ณธ ์˜์กด์„ฑ ์„ค์น˜
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

# 2. ์ปดํฌ๋„ŒํŠธ๋ณ„ ํ•„์š”ํ•œ Radix UI ํŒจํ‚ค์ง€ ์„ค์น˜
npm install @radix-ui/react-checkbox
npm install @radix-ui/react-dialog
# ... ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ์— ๋”ฐ๋ผ ์ถ”๊ฐ€ ์„ค์น˜

์ฃผ์š” ์ปดํฌ๋„ŒํŠธ ์˜ˆ์‹œ

1. Button

<Button variant="outline">Button</Button>
<Button variant="destructive">Delete</Button>