Headless UI for React

완성된 동작,
자유로운 스타일

포커스, 키보드, 접근성, 포지셔닝 — 구현하기 까다로운 인터랙션 동작은 라이브러리가 처리합니다.
스타일은 온전히 사용자의 몫입니다.

명령형 API

컴포넌트 트리 밖 어디서든 호출할 수 있습니다. 비동기 흐름, 에러 핸들러, 유틸리티 함수 안에서도 자연스럽게 동작합니다.

// API 요청 실패 시
const result = await confirm('다시 시도하시겠습니까?')

// 저장 완료 후
toast('변경사항이 저장됐습니다')

Compound 컴포넌트

필요한 부분만 골라서 조합합니다. 오버레이, 콘텐츠, 닫기 액션처럼 각 역할이 분리되어 있어 원하는 구조로 자유롭게 구성할 수 있습니다.

<Drawer.Root direction="right">
  <Drawer.Overlay />
  <Drawer.Content>
    <Drawer.Title />
    <Drawer.Close />
  </Drawer.Content>
</Drawer.Root>

Opt-in 스타일

기본 CSS를 제공하되 언제든 덮어쓸 수 있습니다. data 속성 선택자로 특정 값만 바꾸거나, CSS 소스를 복사해 처음부터 스타일링하세요.

/* 특정 값만 override */
[data-woon-drawer-content] {
  border-radius: 24px 0 0 24px;
  background: #0f0f0f;
}

Components

완성된 동작,자유로운 스타일