Shadcn/ui 이란?

shadcn/ui

shadcn/ui는 Vercel 의 shadcn이 만든 UI 도구로, Radix UI 와 Tailwind CSS라는 상당히 최신 기술을 기반으로 하는 컴포넌트 컬렉션이다. 별도의 종속성 설치없이 코드를 복사하여 프로젝트에 붙여넣고 필요에 맞게 사용자 지정할 수 있다.

사용하는 이유

• 빠른 개발 속도: 미리 만들어진 컴포넌트를 활용해 UI 개발 시간을 크게 단축할 수 있다.
• 높은 커스터마이징 자유도: 컴포넌트 코드를 직접 프로젝트에 복사하여 사용하기 때문에 자유롭게 수정이 가능하다.
• 최소한의 의존성: 필요한 컴포넌트만 선택적으로 사용할 수 있어 프로젝트 의존성을 최소화할 수 있다.
• 최신 기술 스택: React, Tailwind CSS 등 최신 기술을 활용한다.

사용했을 때의 단점

• 일관성 유지의 어려움: 팀 프로젝트에서 각 개발자가 컴포넌트를 수정할 경우 일관성 유지가 어려울 수 있다.
• 디자인 제한: 기본 디자인이 제한적이어서 완전히 새로운 디자인을 적용하기 위해서는 추가 작업이 필요할 수 있다.

설치

npx shadcn-ui@latest init

사용법(예시)

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

이런식으로 Button을 가져다 쓸 수 있다.