Headless UI란?

headless UI란?

시각적 디자인과 컴포넌트의 기능을 분리하여 각각 독립적으로 개발된 디자인 시스템

• 컴포넌트 동작과 디자인이 분리되어있기에 재사용성이 높고, 유연하게 대응 가능함
• 재사용성이 높기에 구현에 적은 시간이 든다.

shadcn-ui

https://ui.shadcn.com/
React 및 Tailwind CSS를 사용해 디자인 시스템과 UI 컴포넌트를 구성하는 도구

• headless UI의 일종
• Radix UI를 기반으로 tailwind css를 적용하여 작성한 재사용 가능한 컴포넌트 모음
• 모든 컴포넌트 블록은 복사 → 붙여넣기를 통해 가져올 수 있다.
• 단 Form, Data-table등 다소 복잡한 컴포넌트는 여러 라이브러리를 기반으로 하기에 완전 자유로운 스타일링이 어려움

shadcn 사용법

1. 패키지 의존성 설치 npm install shadcn-ui@latest
2. 초기화하기 npx shadcn@latest init
   • 자꾸 에러가 발생해서 수동으로 생성 component.json
3. 필요한 컴포넌트 추가 npx shadcn-ui@latest add card
4. 테일윈드로 스타일링하기

---

참고자료

• https://blog.teamelysium.kr/shadcn-ui