shadcn/ui, Base UI 기본값 전환 및 새 기능 공개!

커뮤니티에서는 shadcn/ui가 Radix UI 대신 Base UI를 기본값으로 채택한 것에 대해 다양한 의견이 오감. 일부 사용자는 Base UI의 컴포즈 용이성(Composability)과 더 적은 의존성(Fewer Dependencies)을 장점으로 꼽았으나, 기존 Radix UI 기반 프로젝트의 마이그레이션 부담을 우려하는 목소리도 있음. 특히 Base UI의 라이선스 변경 가능성에 대한 질문도 제기됨.

새롭게 추가된 GitHub 레지스트리 기능은 개발자들이 외부 GitHub 저장소를 직접 컴포넌트 소스 레지스트리(Source Registry)로 활용할 수 있게 함. 이는 `pnpm dlx shadcn@latest add` 명령어를 통해 별도의 빌드나 퍼블리싱 과정 없이 코드를 직접 설치하는 방식임. 개발자들은 이를 통해 디자인 토큰, 유틸리티, 테스트 설정 등 다양한 파일 배포가 가능해져 협업 및 코드 공유 방식에 혁신을 가져올 것으로 기대함.

새로운 Rhea 스타일은 기존 Luma 스타일에 비해 더 콤팩트한 디자인(More Compact Design)을 제공하며, 특히 정보 밀도가 중요한 제품 인터페이스(Product Interfaces)에 적합하다고 설명함. 버튼, 입력 필드, 메뉴 등의 간격이 좁아져 더 많은 정보를 화면에 표시할 수 있음. 이는 Luma 스타일의 유연성을 유지하면서도 공간 효율성을 높이기 위한 선택으로, Tailwind CSS의 스페이싱 스케일(Spacing Scale)을 변경하지 않으면서 디자인 조정이 가능하도록 설계됨.

새로운 @shadcn/react 패키지는 unstyled, headless React 컴포넌트를 제공하여 핵심 UI 로직을 스타일과 분리함. 이는 메시지 스크롤러(Message Scroller)와 같은 기능이 Radix UI 및 Base UI 양쪽 모두에서 작동하도록 지원함. 기존 AI Elements는 AI 인터페이스 컴포넌트 및 패턴을 계속 지원하며, 이번 릴리스는 채팅 UI의 핵심 요소를 shadcn/ui에 점진적으로 통합하는 과정의 일부임을 명확히 함.

shadcn/ui는 shadcn/tailwind.css라는 공유 Tailwind 유틸리티 파일을 통해 RTL 지원 및 커스텀 변형(Custom Variants) 등을 관리함. 사용자가 shadcn 패키지 의존성을 제거하고 싶을 경우, `shadcn eject` 명령어를 사용하여 해당 CSS를 전역 CSS 파일에 직접 인라인(Inline)할 수 있음. 이는 빌드 타임(Build Time)에 처리되며, 프로덕션 환경에서는 트리 쉐이킹(Tree Shaking)을 통해 불필요한 코드가 제거됨.