Shadcn UI 신규 컴포넌트 가이드

지난번 포스팅에서 이야기했던 복사 붙여넣기만으로 완성되는 UI: Shadcn UI 사용기 에서 소개했던 Shadcn UI에서 새로운 컴포넌트 4가지가 발표되어서 가볍게 알아보려고 합니다. 지난 번과 마찬가지로 이번 컴포넌트 역시 코드 전체를 내 코드에 붙여넣는 방식(커스터마이징)으로 진행되며, Drawer, Carousel, Pagination, Resizable, Sooner 컴포넌트가 추가 되었습니다.

Dec 27, 2023

Contents

shadcn/UI 라이브러리 신규 컴포넌트 Drawer 컴포넌트 Carousel 컴포넌트 Pagination 컴포넌트 Resizable 컴포넌트 Sonner 컴포넌트 결론 지난 Shadcn UI 관련 포스팅

shadcn/UI 라이브러리

아직 shadcn이 익숙하지 않을 분들을 위해 shadcn 라이브러리의 특징 몇가지를 짚고 넘어가보도록 하겠습니다

tailwind 기반의 UI

shadcn은 tailwind 라이브러리와 Next.js에서 유지보수하고 있는 Radix UI를 결합하여 만들었습니다. 그래서 UI를 수정하거나 사용하려면 기본적인 tailwind 지식이 필수로 필요합니다.

사전 제작된 많은 UI 컴포넌트

radix UI를 기초로 한 40종에 가까운 컴포넌트를 제공하며, 필요에 따라 추가적인 스타일링 없이 사용이 가능합니다.

기존의 UI 라이브러리와 차별화된 개발 경험

Shadcn은 CLI를 통해서 컴포넌트를 나의 프로젝트에 붙어넣기를 하고, 내가 원하는 형태로 변경하여 사용할 수 있습니다.

theming 및 다크모드 지원

tailwind theme를 기반으로 손쉽게 전체 프로젝트의 theme를 변경할 수 있으며 또한 dark mode 지원이 가능합니다.

신규 컴포넌트

Drawer 컴포넌트

이제 shadcn에서도 apple의 sheet와 같은 핸들러가 있는 컴포넌트를 생성할 수 있습니다.

vaul 라이브러리 기반으로 만들어 졌으며, vaul 라이브러리에서 지원하는 스냅 포인트 관련 설정, 스크롤 threadhold 같은 것들을 props 형태로 제어가 가능합니다.

단, 기존에 있던 Sheet 컴포넌트와 달리 컴포넌트를 닫을 수 있는 버튼이 존재하지 않기 때문에, 명확한 CTA가 있는 경우에 사용하면 좋을 것 같습니다.

Carousel 컴포넌트

Material UI나 Bootstrap UI에 있던 Carousel 컴포넌트가 추가되었습니다.

embla carousel 기반으로 작성되었으며, 기본적으로 Size(크기), Spacing(간격), Orientation(방향), loop(반복) 등이 Props를 통해 설정이 가능합니다.

뿐만 아니라,embla carousel 기반으로 만들어졌기 때문에, Auto Play, Wheel gesture 등 플러그인으로 제공되는 기능들 또한 같이 사용이 가능합니다.

Pagination 컴포넌트

드디어 Pagination 컴포넌트가 추가되었습니다


export function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

기반이 되는 라이브러리는 없으며, 위와 같이 해당 Pagenation 버튼에 href로 링크를 연결하는 형태로 지원됩니다.