shadcn/ui, 기본 컴포넌트 라이브러리를 Radix에서 Base UI로 변경

shadcn/ui의 기본값이 바뀜

• shadcn/ui가 오늘부터 새 프로젝트의 기본 컴포넌트 라이브러리를 Base UI로 바꿨음

  • 2023년 1월 shadcn/ui가 처음 나왔을 때는 Radix가 기반이었음
  • 당시 Radix는 비스타일 headless 컴포넌트, 접근성, API, 실전 검증 측면에서 사실상 독보적인 선택지였음

• 이번 변경은 “Radix 버림”이 아니라 “새 프로젝트 기본값 변경”에 가까움

  • Radix는 폐기되지 않고 계속 지원됨
  • 업데이트와 새 컴포넌트도 양쪽 라이브러리로 제공할 예정임
  • 단, 어떤 컴포넌트가 Base UI에만 있으면 예외가 생길 수 있음

• shadcn/ui가 Base UI를 기본값으로 바꾼 이유는 꽤 명확함

  • Base UI가 안정화됐고 현재 버전은 1.6.0임
  • 주간 다운로드가 600만 이상임
  • shadcn/create로 만든 프로젝트에서 Base UI 선택이 Radix보다 2대1로 많았음
  • shadcn 팀도 새 프로젝트에는 Base UI를 쓰고 있다고 밝힘

새 프로젝트와 자동화에 생기는 변화

• 이제 npx shadcn init을 실행하면 Base UI가 기본 선택지임

  • shadcn/create에서도 Base UI가 먼저 표시됨
  • 문서의 컴포넌트 페이지도 Base UI 탭을 기본으로 열고, Radix 문서는 한 번 클릭하면 볼 수 있음

• CI나 스크립트에서 조용히 깨질 수 있는 지점이 있음

  • 비대화형으로 shadcn init을 돌리면서 Radix가 기본이라고 가정한 스크립트는 -b radix 플래그를 붙여야 기존 경로를 유지함
  • 레지스트리를 만드는 경우 특정 라이브러리를 고정하려면 registry:base 설정을 제공해야 함
  • 설정이 없는 항목은 이제 Base UI로 초기화됨

• 마이그레이션은 codemod 대신 ‘스킬’ 방식으로 제공됨

  • 이유는 프로젝트마다 컴포넌트를 복사한 뒤 변형, 클래스 변경, 새 프롭 추가를 해두기 때문임
  • 단순 codemod는 손대지 않은 컴포넌트에는 먹히지만, 커스터마이징된 코드에서 깨지기 쉽다는 판단임

• 마이그레이션 방식은 점진적 전환을 전제로 함

  • 컴포넌트 하나와 그 사용처를 한 번에 옮기고, 프로젝트는 계속 빌드 가능한 상태로 유지하는 식임
  • 두 라이브러리가 동시에 공존할 수 있고, 중간에 멈췄다가 나중에 이어서 진행할 수 있음
  • 기계적으로 바꿀 수 있는 건 전체 반영하되, 동작 차이는 자동 수정하지 않고 확인 대상으로 표시함

sequenceDiagram
    participant 개발자
    participant shadcn초기화
    participant BaseUI
    participant Radix
    participant 프로젝트
    개발자->>shadcn초기화: npx shadcn init 실행
    shadcn초기화->>BaseUI: 기본 라이브러리로 선택
    개발자->>shadcn초기화: -b radix 지정 시
    shadcn초기화->>Radix: 기존 경로 유지
    shadcn초기화->>프로젝트: 선택한 기반으로 컴포넌트 생성

채팅 컴포넌트도 같이 공개됨

• shadcn/ui는 채팅 인터페이스용 컴포넌트 묶음도 새로 냈음

  • MessageScroller, Message, Bubble, Attachment, Marker가 포함됨
  • 첫 단계는 대화 레이어, 즉 스크롤, 메시지 행, 말풍선, 첨부파일, 마커에 집중함

• MessageScroller는 스트리밍 채팅에서 은근히 망가지기 쉬운 스크롤 문제를 맡음

  • 고정된 턴, 스트리밍 응답, 저장된 스레드 복원, 이전 기록 추가, 특정 메시지로 이동, 스크롤 컨트롤, 가시성 추적을 처리함
  • 대신 메시지 데이터, AI 상태, 전송 계층, 저장소, 모델 상태는 소유하지 않음
  • 콘텐츠 렌더러는 사용자가 가져오는 구조임

• 나머지 컴포넌트는 채팅 UI의 반복 부품을 담당함

  • Message는 아바타, 정렬, 헤더, 본문, 푸터, 그룹 메시지 레이아웃을 다룸
  • Bubble은 말풍선 표면, 변형, 정렬, 반응, 링크, 버튼, 접힘 콘텐츠를 처리함
  • Attachment는 파일과 이미지, 메타데이터, 업로드 상태, 액션을 렌더링함
  • Marker는 스트리밍 상태, 도구 실행, 날짜 구분선 같은 시스템성 표시를 맡음

• 새 CSS 유틸리티도 추가됨

  • scroll-fade는 스크롤 컨테이너 가장자리에 더 볼 콘텐츠가 있다는 힌트를 주는 페이드를 넣음
  • shimmer는 “생각 중”, “응답 생성 중”, 도구 실행 상태 같은 라이브 텍스트에 반짝이는 효과를 줌
  • 둘 다 shadcn/tailwind.css에 포함돼, 최신 init 프로젝트에서는 바로 쓸 수 있음

@shadcn/react의 의미

• @shadcn/react라는 새 headless React 패키지도 나왔음

  • 첫 primitive는 @shadcn/react/message-scroller임
  • shadcn/ui 레지스트리 컴포넌트는 스타일을 입힌 래퍼이고, 어려운 스크롤 동작은 패키지 안에 들어감

• 이 구조는 꽤 실용적인 분리임

  • 프로젝트는 여전히 복사해서 고치는 shadcn/ui 스타일을 유지함
  • 하지만 스크롤 고정, 자동 따라가기, 이전 기록 추가 시 위치 보존 같은 까다로운 상호작용 로직은 테스트된 한 곳에서 가져올 수 있음
  • AI Elements를 대체하는 건 아니고, 필요한 부분만 독립적으로 채택하라는 방향임

기술 맥락

• shadcn/ui가 Base UI를 기본값으로 바꾼 건 “새 라이브러리가 더 힙해서”가 아니라, 기본 선택의 비용을 다시 계산한 결과에 가까워요. 안정 버전, 다운로드 수, 실제 신규 프로젝트 선택 비율, 내부 사용 경험이 쌓였기 때문에 기본값을 움직인 거예요.

• 기존 앱에 마이그레이션을 강요하지 않는 것도 중요한 결정이에요. 컴포넌트 라이브러리는 버튼 몇 개 바꾸는 문제가 아니라 접근성 동작, 포커스 처리, 포털, 애니메이션, 테스트 스냅샷까지 흔들 수 있거든요.

• codemod 대신 스킬을 택한 이유도 shadcn/ui의 사용 방식과 맞닿아 있어요. shadcn/ui는 패키지를 설치해 쓰는 모델이 아니라 코드를 프로젝트로 복사해 고치는 모델이라, 각 팀의 커스터마이징을 이해하지 못하면 자동 변환이 쉽게 깨져요.

• MessageScroller를 headless 패키지로 뺀 건 채팅 UI에서 특히 합리적이에요. 스트리밍 응답 중 자동 스크롤, 이전 메시지 prepend 후 위치 보존, 특정 메시지 점프 같은 건 UI 스타일보다 동작 정확성이 더 중요하기 때문이에요.