스킬 관리Skill조회 0

Shadcn UI

shadcn/ui 구성 요소 라이브러리 패턴을 제공하며 설치, 설정 및 접근 가능한 React 컴포넌트 구현을 포함합니다.

01

언제 사용하는가

접근성 있는 React 컴포넌트의 설치, 설정 및 구현과 함께 shadcn/ui 구성 요소 라이브러리 패턴을 제공합니다.

shad.cn/ui를 설정하거나 컴포넌트 설치, React Hook Form과 Zod로 폼 생성, Tailwind CSS를 사용한 테마 커스터마이징 또는 버튼, 대화상자, 드롭다운, 표 및 복잡한 폼 레이아웃과 같은 UI 패턴 구현 시에 사용합니다.

02

따라 하는 방법

  1. npx create-next-app@latest my-app --typescript --tailwind --eslint --app을 실행합니다.
  2. npx shadcn@latest init을 실행합니다.
  3. npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react을 실행합니다.
  4. npx shadcn@latest add button input form card dialog select toast을 실행합니다.
03

설치 방법

npx skills add installs: 19252 --skill shadcn-ui