Introduction

Shadcn 이란?

Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트로, 컴포넌트 라이브러리가 아닙니다. 앱에 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트 모음입니다.

npx shadcn-ui@latest init

패키지 종속성을 설치하지 않고 필요한 구성요소를 선택하거나 복사하여 프로젝트에 붙여넣고 필요에 따라 사용자를 지정할 수 있습니다.

예를 들어 아래 cli을 실행하는 경우

npx shadcn-ui@latest add button

프로젝트의 node-modules가 아닌 나의 프로젝트에 설치가 되게 됩니다.

shadcn/ui

또한 shadcn ui의 Block 의 Lift Mode를 사용하면 사용자가 원하는 모양에 따라 AI가 커스텀도 하여 그에 맞는 코드를 나의 프로젝트에 붙여 사용을 할 수 있습니다.

Next.js 프로젝트에 사용하기