2025-07-28 22:37

Status:

Tags: 리액트 넥스트

Radix UI

스타일 없는 접근성 중심의 컴포넌트 라이브러리 헤드리스 UI 의 대표 라이브러리

Primitives Themes Colors Icons 4가지가 있으며 이 중에서 헤드리스 ui 관련 기능은 Primitives가 중심

코드 예시에서 볼 수 있듯이 필요한 요소들 구조가 잘 정의되어 있으므로 원하는 기능이 있을때 가져다가 사용하면 된다.

<Dialog.Root>           // 상태 관리
  <Dialog.Trigger />    // 열기 버튼
  <Dialog.Portal>       // body 바깥 렌더링
    <Dialog.Overlay />  // 배경 오버레이
    <Dialog.Content>    // 실질 내용
      <Dialog.Title />
      <Dialog.Description />
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Radix 를 제대로 사용하면 ARIA나 포커스관리, 키보드 지원 등 다양한 기능들을 자동으로 별도의 셋팅 추가 없이 사용할 수 있다.

References

헤드리스 UI Shadcn UI Radix UI 핸드북 https://www.radix-ui.com/primitives/docs/overview/getting-started