shadcn/ui 2026년 7월 업데이트: Base UI 기본값 및 새로운 채팅 컴포넌트

shadcn/ui 2026년 7월 업데이트: Base UI 기본값 및 새로운 채팅 컴포넌트

shadcn/ui가 이제 Base UI를 기본값으로 사용합니다

Base UI가 이제 새로운 shadcn/ui 프로젝트의 기본 컴포넌트 라이브러리가 되었으며, 초기화 시 기본 선택이 Radix에서 Base UI로 바뀌었습니다. 이 변화는 shadcn/create를 통해 생성된 프로젝트가 Radix보다 Base UI를 2대 1 비율로 선택한 커뮤니티 채택 기간을 거친 결과입니다.

사용자에게 제공되는 주요 변경 사항

  • 초기화: npx shadcn init을 실행하면 이제 기본적으로 Base UI가 선택됩니다.
  • 문서: 컴포넌트 페이지가 기본적으로 Base UI 탭을 표시하지만, Radix 문서는 한 번 클릭으로 여전히 접근할 수 있습니다.
  • CLI 기본값: shadcn/create가 이제 첫 번째 옵션으로 Base UI를 제시합니다.

Radix 지원

Radix는 폐기되지 않았습니다. shadcn/ui는 Radix를 계속 지원하며, 새로운 컴포넌트는 두 라이브러리 모두에 대해 제공됩니다(단, 컴포넌트가 Base UI 전용인 경우는 제외). 기존에 Radix를 사용 중인 프로덕션 앱은 마이그레이션이 필요하지 않으며, 새 프로젝트에서 Radix를 선호하는 경우 shadcn init 시 -b radix 플래그를 사용해 이전 기본값을 유지할 수 있습니다.

AI 기반 마이그레이션 경로

전통적인 codemod 대신, shadcn/ui는 코딩 에이전트(예: Claude Code 또는 Cursor)를 위한 "skill"을 도입해 마이그레이션을 처리합니다. 이 접근 방식은 기계식 codemod가 일반적으로 덮어쓰는 커스텀 변형, 클래스 및 props를 보존하도록 설계되었습니다.

마이그레이션 프로세스가 생성하는 내용:

  • 검증된 코드: 성공을 보고하기 전에 타입 체크와 빌드가 완료된 코드.
  • 상세 보고서: 각 컴포넌트에 대한 변경 사항, 유지된 내용 및 수동 검증 체크리스트를 포함하는 .migration/ 디렉터리.
  • 원자적인 Git 히스토리: 별도 브랜치에 컴포넌트당 하나의 커밋을 만들어 손쉬운 롤백을 가능하게 함.

새로운 채팅 인터페이스 컴포넌트

shadcn/ui는 스트리밍 채팅 경험을 위해 특별히 설계된 컴포넌트 모음을 출시했습니다, 대화 레이어와 상호작용 로직에 초점을 맞춥니다.

핵심 채팅 프리미티브

  • MessageScroller: 앵커된 턴, 스트리밍 응답, 저장된 스레드 복원, 가시성 추적 등 복잡한 동작을 관리하는 스크롤 컨테이너. 새로운 @shadcn/react 패키지에서 스타일이 없는 헤드리스 컴포넌트로도 제공됩니다.
  • Message: 아바타, 정렬, 그룹화된 메시지를 포함한 대화 행 레이아웃을 처리합니다.
  • Bubble: 반응, 링크, 접을 수 있는 콘텐츠를 지원하는 메시지 표면을 렌더링합니다.
  • Attachment: 메타데이터와 업로드 상태를 포함한 파일 및 이미지 렌더링을 관리합니다.
  • Marker: 시스템 노트, 날짜 구분선, 스트리밍 상태 표시 등에 사용됩니다.

채팅 전용 CSS 유틸리티

shadcn/tailwind.css에 두 가지 새로운 유틸리티가 추가되었습니다:

  • scroll-fade: 추가 콘텐츠가 있음을 암시하기 위해 컨테이너에 스크롤 인식 가장자리 페이드를 추가합니다.
  • shimmer: 실시간 상태 표시기(예: "Thinking...")에 텍스트 쉐이머 효과를 제공합니다.

GitHub 리포지토리를 레지스트리로 활용

이제 모든 공개 GitHub 리포지토리를 shadcn 레지스트리로 전환할 수 있어, 개발자는 컴포넌트뿐 아니라 훅, 유틸리티, 디자인 토큰, CI 워크플로까지 배포할 수 있습니다.

리포지토리 루트에 registry.json 파일을 추가하면 사용자는 shadcn CLI를 통해 항목을 직접 설치할 수 있습니다. 예를 들어, 팀은 npx shadcn add https://github.com/acme/toolkit/project-conventions 명령을 사용해 .editorconfig나 AGENTS.md와 같은 프로젝트 규칙을 배포할 수 있습니다.

추가 업데이트 및 도구

shadcn eject 명령

shadcn 패키지에 대한 의존성을 줄이기 위해, shadcn eject 명령은 공유된 shadcn/tailwind.css(여기에는 data-open: 같은 커스텀 변형이 포함됨)를 프로젝트의 전역 CSS 파일에 인라인으로 삽입하고 패키지 의존성을 제거합니다.

Rhea 스타일

Rhea는 Luma를 기반으로 한 새로운 컴팩트 디자인 스타일입니다. 더 작은 간격과 촘촘한 컨트롤을 제공해 정보 밀도를 높이며, 기본 Tailwind 간격 스케일을 변경하지 않고 집중된 제품 인터페이스에 최적화되었습니다.

@shadcn/react 패키지

이 새로운 패키지는 스타일이 없는 헤드리스 React 컴포넌트를 제공합니다. 첫 번째 프리미티브인 message-scroller를 통해 개발자는 특정 시각적 스타일에 얽매이지 않고 복잡한 스크롤 동작을 구현할 수 있습니다.

커뮤니티 의견

Base UI로의 전환과 AI 지원 마이그레이션으로의 이동은 개발자들 사이에서 활발한 논의를 일으켰습니다:

"codemod에서 LLM이 마이그레이션 작업을 수행하도록 전환하는 것은 흥미로운 발전입니다. 더 결정론적이라 하더라도, codemod의 시대가 끝날지 궁금합니다."

일부 사용자는 이러한 라이브러리의 "div‑heavy" 특성에 대해 우려를 표명하며, <details>와 <summary> 같은 네이티브 HTML 요소가 복잡한 div 구조를 대체할 수 있다고 지적했습니다. 또 다른 사용자들은 복사‑붙여넣기 방식과 Mantine 같은 전통 UI 라이브러리와의 트레이드오프를 질문했으며, 전자는 업데이트를 위해 AI 에이전트가 필요하지만 후자는 단순히 버전 업만으로 해결된다고 언급했습니다.

요약: shadcn/ui는 기본 컴포넌트 라이브러리를 Base UI로 전환하고, 특화된 채팅 인터페이스 컴포넌트를 도입했으며, GitHub 리포지토리를 레지스트리로 활용할 수 있게 했습니다.

제목: shadcn/ui 2026년 7월 업데이트: Base UI 기본값 및 새로운 채팅 컴포넌트

Sources