Shadcn/UI가 Radix 대신 Base UI를 기본값으로 전환

1 hour ago 1

shadcn/ui는 2026년 7월부터 새 프로젝트와 문서의 기본 흐름을 Base UI 중심으로 바꾸며, 2023년 출시 이후 이어진 Radix 기본값에서 방향을 전환함
Base UI는 1.6.0 안정 버전과 주간 600만 회 이상 다운로드에 도달했고, shadcn/create 프로젝트에서도 Radix보다 2:1로 더 많이 선택됨
Radix는 지원 중단되지 않으며, 기존 앱은 그대로 유지해도 되고 Base UI에만 있는 컴포넌트를 제외하면 업데이트와 새 컴포넌트도 계속 제공됨
마이그레이션은 codemod가 아니라 에이전트 skill로 제공되어, 수정된 컴포넌트와 사용처를 컴포넌트 단위로 점진 이전하고 .migration/ 리포트와 git 커밋을 남김
채팅 UI 컴포넌트, GitHub 저장소 기반 registry, shadcn eject, 새 스타일 Rhea까지 더해지며 shadcn/ui의 범위가 컴포넌트 배포와 제품 UI 구성 전반으로 넓어짐

Base UI가 기본 컴포넌트 라이브러리가 됨

2026년 7월부터 Base UI가 shadcn/ui의 기본 컴포넌트 라이브러리로 지정됨
shadcn/ui는 2023년 1월 출시 당시 Radix 기반으로 만들어졌고, 당시 Radix는 스타일 없는 헤드리스 컴포넌트, API, 접근성, 실제 앱 사용 경험을 갖춘 선택지였음
Base UI는 Radix를 만든 사람들이 새로 만들고 있는 라이브러리이며, shadcn/ui는 기존 추상화를 유지한 채 모든 컴포넌트를 Base UI용으로 다시 만듦
2025년 12월에는 npx shadcn create에서 두 라이브러리를 모두 선택할 수 있게 했고, 2026년 1월에는 Base UI 문서를 완성함

기본값을 바꾼 이유

Base UI의 안정성과 사용 흐름
- Base UI 버전은 1.6.0임
- 주간 다운로드는 600만 회 이상임
- Base UI 팀은 새롭고 유용한 컴포넌트를 정기적으로 배포함
- shadcn/ui의 새 프로젝트들은 Base UI를 사용 중임
- shadcn/create로 생성되는 프로젝트는 Base UI를 Radix보다 2:1 비율로 더 많이 선택함
- shadcn/ui는 이 선택 흐름을 공식 기본값으로 반영함

새 프로젝트와 문서에서 달라지는 점

새 프로젝트에서 npx shadcn init을 실행하면 Base UI가 기본 선택지가 됨
shadcn/create는 Base UI를 먼저 보여줌
문서의 컴포넌트 페이지는 Base UI 탭을 기본으로 열고, Radix 문서는 한 번의 클릭으로 접근할 수 있음

Radix 사용자가 알아야 할 점

Radix는 계속 지원됨
- shadcn/ui는 Radix 지원을 유지함
- Base UI에만 존재하는 컴포넌트를 제외하면 모든 업데이트와 새 컴포넌트는 두 라이브러리 모두에 제공됨
- 기존 앱은 마이그레이션할 필요가 없음
- Radix는 성숙하고 테스트된 라이브러리임
- shadcn/ui도 Radix를 프로덕션에서 계속 사용 중이며, 자체 프로젝트도 마이그레이션하지 않음
- 새 프로젝트에서 Radix를 선호하면 플래그를 사용할 수 있음
- shadcn init을 비대화형으로 실행하는 스크립트나 CI가 Radix를 기대한다면 -b radix를 추가해야 기존 경로를 유지함
- registry를 만들 때 특정 라이브러리에 고정하려면 registry:base 설정을 제공할 수 있음
- 해당 설정이 없는 항목은 이제 Base UI로 초기화됨
- 새 프로젝트에는 Base UI가 권장됨

Base UI로 이전하는 방식

마이그레이션은 필수가 아니지만, 원할 경우 skill을 사용할 수 있음
코딩 에이전트에는 다음처럼 요청할 수 있음
- migrate accordion to base-ui
기본 방식은 점진적 마이그레이션임
- 컴포넌트와 사용처를 하나씩 이전함
- 프로젝트는 계속 green 상태와 배포 가능한 상태를 유지함
- 작업 중에는 두 라이브러리가 공존함
- 중간에 멈췄다가 나중에 이어서 진행할 수 있음
- 원하면 전체 프로젝트를 한 번에 요청할 수도 있음

codemod 대신 skill을 택한 이유

shadcn/ui 컴포넌트는 사용자가 소유하고 수정하는 코드라서, codemod는 손대지 않은 컴포넌트에는 맞더라도 수정된 컴포넌트에서는 깨질 수 있음
skill에는 이름 변경, prop 변경, 동작 차이가 양쪽 라이브러리 기준으로 손검수되어 들어 있음
에이전트는 사용자가 바꾼 부분을 파악하고 그 변경을 이전 대상에도 반영함
기계적으로 처리 가능한 변경은 전체에서 수정됨
- 예: asChild는 render로 바뀜
동작 변화는 조용히 패치되지 않고 표시되며, 최종 판단은 사용자가 함

마이그레이션이 남기는 결과물

매 실행은 세 가지 결과를 남김
- 동작하는 코드: 성공 보고 전에 타입체크와 빌드를 수행함
- 컴포넌트별 리포트: 프로젝트 루트의 .migration/에 변경 사항, 그대로 둔 부분, 수동 확인 체크리스트를 남김
- 깨끗한 git 이력: 브랜치 위에 컴포넌트당 하나의 커밋을 남기며, 롤백은 브랜치를 삭제하면 됨
리포트 예시는 .migration/accordion.md이며, 다음 섹션을 포함함
- Changed
- Left alone
- Behavior changes
- Verify by hand
숨겨진 상태 없이 진행 상황이 파일과 git 이력에 남기 때문에, 어떤 에이전트나 세션에서도 이어서 작업할 수 있음
Claude Code, Cursor, skill을 지원하는 에이전트에서 동작함
실제 프로젝트 테스트에서는 60개 이상 컴포넌트 중 36개가 Radix였고, 전체 마이그레이션은 약 25분, 컴포넌트당 약 1만 토큰으로 진행됨
빌드는 깨끗하게 통과했고 커스터마이징은 유지됨

채팅 인터페이스용 컴포넌트 추가

2026년 6월에는 채팅 인터페이스를 만들기 위한 새 컴포넌트가 추가됨
첫 단계는 대화 레이어를 구성하는 핵심 조각임
- 스크롤
- 메시지 행
- 말풍선
- 첨부
- 마커
MessageScroller는 대화용 스크롤 컨테이너임
- anchored turns
- streamed replies
- saved thread restore
- prepended history
- jump-to-message
- scroll controls
- visibility tracking을 처리함
MessageScroller는 메시지, AI 상태, 전송, 저장, 모델 상태를 소유하지 않으며, 콘텐츠 렌더러는 사용자가 제공함
MessageScroller는 @shadcn/react의 스타일 없는 헤드리스 컴포넌트로도 제공됨

Message, Bubble, Attachment, Marker의 역할

Message는 대화의 한 행을 배치함
- 아바타
- 정렬
- 헤더
- 콘텐츠
- 푸터
- 그룹 메시지를 다룸
Bubble은 메시지 표면을 렌더링함
- variants
- 정렬
- reactions
- links
- buttons
- collapsible content를 지원함
Attachment는 파일과 이미지를 렌더링함
- media
- metadata
- upload state
- actions
- 별도로 클릭 가능한 action을 유지하는 full-card trigger를 제공함
Marker는 상태 업데이트, 시스템 노트, 테두리 행, 라벨 구분선을 렌더링함
- streaming state
- tool activity
- date breaks 같은 용도에 사용됨
이 컴포넌트들은 작게 설계되어 AI 채팅, support inbox, team thread, group chat, 제품별 대화 UI에 조합할 수 있음

채팅 UI용 CSS 유틸리티와 @shadcn/react

새 CSS 유틸리티 두 개가 추가됨
- scroll-fade: 스크롤 컨테이너 가장자리에 스크롤 인지 fade를 추가함
- shimmer: "Thinking…", "Generating response…", 도구 실행, 스트리밍 마커 같은 라이브 상태 텍스트에 shimmer를 추가함
두 유틸리티는 shadcn/tailwind.css에 포함됨
- npx shadcn@latest init으로 초기화한 프로젝트에는 이미 포함됨
@shadcn/react는 스타일 없는 헤드리스 React 컴포넌트를 위한 새 패키지임
- 첫 primitive는 @shadcn/react/message-scroller
- registry 컴포넌트는 shadcn/ui 스타일로 감싸지만, anchoring, auto-follow, prepend preservation, scroll commands, visibility 같은 스크롤 동작은 패키지에 있음
이 방식은 시각 스타일에 묶이지 않고 동작을 제공하며, 어려운 상호작용 로직을 한곳에서 테스트할 수 있게 함
Radix와 Base UI 모두에서 사용 가능함

AI Elements와의 관계

새 채팅 컴포넌트는 AI Elements를 대체하지 않음
AI Elements의 AI 인터페이스 컴포넌트와 패턴은 계속 사용할 수 있음
이번 릴리스는 채팅의 핵심 조각을 shadcn/ui에 하나씩 가져오는 데 초점이 있음
이미 AI Elements 컴포넌트를 쓰고 있다면 앱을 다시 작성할 필요가 없음
더 새로운 추상화, 업데이트된 스타일, Radix와 Base UI 양쪽 지원이 필요할 때 shadcn/ui 버전을 시도할 수 있음

GitHub 저장소를 registry로 사용

2026년 6월부터 공개 GitHub 저장소를 registry로 사용할 수 있음
저장소 루트에 registry.json을 추가하고 배포할 항목을 정의하면 사용자가 shadcn CLI로 GitHub에서 직접 설치할 수 있음
GitHub registry는 source registry임
- shadcn build를 실행할 필요가 없음
- 생성된 item JSON 파일을 publish할 필요가 없음
- registry 서버를 설정할 필요가 없음
CLI는 루트의 registry.json을 읽고 include 항목을 해석하며, 요청된 항목을 찾아 해당 파일을 설치함
registry 항목은 컴포넌트에 제한되지 않음
- components
- hooks
- utilities
- design tokens
- feature kits
- project conventions
- agent instructions
- testing setup
- CI workflows
- release workflows
- templates
- codemods
- migration kits
- 기타 프로젝트 파일을 배포할 수 있음
GitHub registry 주소는 기존 registry 주소와 같은 명령에서 동작함
- list
- search
- view
- install

shadcn eject와 shadcn/tailwind.css

Radix와 Base UI를 모두 지원하면서 두 라이브러리가 의존하는 공유 Tailwind 유틸리티를 둘 장소가 필요해짐
- 예: data-open:, data-closed: 같은 custom variant
- 예: no-scrollbar 같은 utility
RTL 지원 작업 중 일부 버그도 모든 컴포넌트에 중복 적용하는 대신 한곳에서 고치기 쉬웠음
이를 위해 shadcn/tailwind.css 가 만들어짐
- init 실행 시 전역 CSS 파일에 @import "shadcn/tailwind.css"가 추가됨
- tw-animate-css 같은 CSS import처럼 동작함
- 프로덕션에서는 tree-shaken되고 빌드 시 해석되는 작은 의존성임
shadcn 패키지의 CSS 의존을 원하지 않으면 shadcn eject 를 사용할 수 있음
- shadcn/tailwind.css를 전역 CSS 파일에 inline함
- 프로젝트에서 shadcn 의존성을 제거함
monorepo에서는 components.json과 전역 CSS 파일이 있는 workspace에서 명령을 실행해야 함

새 스타일 Rhea

2026년 5월에는 새 shadcn/ui 스타일 Rhea가 추가됨
Rhea는 더 compact한 Luma로, 작은 spacing과 더 조밀한 surface를 갖고 focused product interface를 위해 만들어짐
Rhea는 Luma의 부드러움과 형태를 유지하면서 버튼, 입력, 메뉴, 카드, 리스트를 더 타이트하게 배치함
Luma의 --spacing을 조정하는 방식은 선택하지 않음
- --spacing은 multiplier이므로 바꾸면 앱 전반에서 p-2, w-4, m-16 같은 익숙한 Tailwind utility의 의미가 달라짐
Rhea는 별도 스타일로 제공되어 component size, gap, density를 직접 조정하면서 underlying utility scale은 예측 가능하게 유지함
Rhea는 shadcn/create에서 Radix와 Base UI 모두에 사용할 수 있음