01
언제 사용하는가
접근성 있는 React 컴포넌트의 설치, 설정 및 구현과 함께 shadcn/ui 구성 요소 라이브러리 패턴을 제공합니다.
shad.cn/ui를 설정하거나 컴포넌트 설치, React Hook Form과 Zod로 폼 생성, Tailwind CSS를 사용한 테마 커스터마이징 또는 버튼, 대화상자, 드롭다운, 표 및 복잡한 폼 레이아웃과 같은 UI 패턴 구현 시에 사용합니다.
02
따라 하는 방법
- npx create-next-app@latest my-app --typescript --tailwind --eslint --app을 실행합니다.
- npx shadcn@latest init을 실행합니다.
- npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react을 실행합니다.
- npx shadcn@latest add button input form card dialog select toast을 실행합니다.
03
설치 방법
npx skills add installs: 19252 --skill shadcn-ui