headless UI란 시각적 디자인과 컴포넌트의 기능을 분리하여 각각 독립적으로 개발된 디자인 시스템이다.
컴포넌트의 외관과 동작이 분리되어 있어서 디자인과 기능을 독립적으로 조정할 수 있다.
shadcn-ui는 Vercel의 shadcn이 만든 UI도구이다.
shadcn/ui가 많은 관심을 받은 이유 중 하나가 바로 스스로 component library를 거부하고 component collection이라 소개하기 때문이다.
headless UI의 일종으로, Radix UI를 기반으로 tailwind css를 적용하여 작성한 재사용 가능한 컴포넌트 모음이다. 라이브러리가 아니기 때문에 의존성으로 명시할 필요가 없으며, 모든 컴포넌트 블록은 복붙을 통해 내 프로젝트 일부로 만들고, 자유롭게 수정할 수 있다.
Headless UI가 디자인과는 완전히 분리된, 기능 위주의 UI를 뜻하긴 하지만 shadcn-ui는 프로토타입으로 사용할 수 있을 정도의 심플한 디자인은 제공하고 있다. 하지만 className을 통해 쉽게 커스텀 할 수 있도록 twMerge와 clsx를 차용하고 있고, cva를 통해 variant를 적용할 수도 있다. 여기까지만 보면 장점뿐이지만 단점도 물론 존재한다.
Form, Data-table 등의 컴포넌트는 react-hook-form, zod, tanstack/react-table 등의 라이브러리를 기반으로 하고 있는데 원하는 만큼 컨트롤하면서 적용하기 까다로워 시간이 꽤 소요되는 편이다. 단발성으로 사용한다면 도입하는 의도와는 배치되는 부분이 있기도 하다. 그러나 Checkbox, Radio button, Toggle 등 작으면서도 까다로운 요소들을 구현하는 데에는 많은 도움이 될 수 있다.
MUI(Material UI)