ArkUI
이 오픈 소스 UI 솔루션을 사용하면 다양한 시각적 스타일과 접근성 표준에 맞게 조정할 수 있는 사용자 지정 가능한 컴포넌트로 정교한 디자인 시스템을 만들 수 있습니다.
마크업과 CSS를 완전히 제어하면서 뛰어난 기본 접근성과 ARIA 준수 동작을 제공하는 헤드리스 React 컴포넌트 라이브러리입니다.
조합 가능한 프리미티브와 슬롯 기반 API로 설계되어 컴포넌트를 트리 셰이킹할 수 있고 TypeScript를 지원합니다. Tailwind, CSS Modules, CSS-in-JS, 일반 CSS 등 어떤 스타일링 방식과도 함께 사용할 수 있습니다.
Accordion, Alert Dialog, Avatar, Checkbox 및 Checkbox Group, Collapsible, Context Menu, Dialog, Field 및 Fieldset, Form, Input, Menu 및 Menubar, Meter, Navigation Menu, Number Field, Popover, Progress, Radio, Scroll Area, Select, Separator, Slider, Switch, Tabs, Toast, Toggle 및 Toggle Group, Toolbar, Tooltip 등 다양한 UI 패턴과 프리미티브를 제공합니다. Direction Provider 및 useRender 같은 유틸리티도 포함되어 있습니다.
팝업 컴포넌트는 React Portals를 사용하며 z-index 충돌을 방지하기 위해 독립된 스태킹 컨텍스트를 만들도록 권장합니다. 이를 통해 오버레이가 페이지 콘텐츠 위에 항상 표시됩니다. 문서에는 컴포넌트 조립, 파트 구성, 다양한 스타일링 시스템과의 통합 예제가 포함되어 있습니다.
MIT 라이선스에 따른 오픈 소스이며, 활발한 릴리스와 로드맵, 접근성 중심의 가이드를 제공합니다. 문서 페이지는 Markdown으로 볼 수 있으며, 코드를 더 쉽게 탐색하고 통합할 수 있도록 LLM 친화적인 리소스도 포함합니다.
기능
- 스타일이 없는 헤드리스 React 컴포넌트
- 기본적으로 접근성을 지원하며 ARIA 준수 동작 제공
- 조합 가능한 슬롯 기반 API
- 트리 셰이킹 가능한 ESM 빌드
- TypeScript 타입 정의
- Tailwind, CSS Modules, CSS-in-JS 또는 일반 CSS와 함께 사용 가능
- 팝업과 오버레이를 위한 React Portals
- z-index 문제 방지를 위한 스태킹 컨텍스트 분리 가이드
- 제어형 및 비제어형 사용 패턴
- 다양한 컴포넌트 제공(메뉴, 대화상자, 팝오버, 탭, 선택 메뉴, 슬라이더 등)
- SSR 친화적이며 프레임워크에 구애받지 않음
- MIT 라이선스 오픈 소스
- LLM 도우미가 포함된 Markdown 문서 제공
관련 항목
MaterialUI
이 제품은 유연성과 디자인 표준 준수에 중점을 두고 React에서 사용자 인터페이스를 구축하기 위한 강력한 도구 모음을 제공합니다.
Radix Vue
디자인 시스템 구축을 위한 사용자 지정 가능하고 접근성 높은 UI 컴포넌트를 제공하는 비공식 Vue 포트입니다.
PrimeVue
Vue.js 애플리케이션을 쉽고 효율적으로 구축할 수 있도록 설계된 다양한 오픈 소스 UI 컴포넌트 모음입니다.
Radix Primitives
스타일이 적용되지 않은 접근성 높은 오픈 소스 React 프리미티브로, 고품질 웹 앱과 디자인 시스템을 구축할 수 있습니다.
Vaul
React 애플리케이션에 원활하게 통합되도록 설계된 스타일 없는 드로어 컴포넌트로, 모바일 기기에서의 사용자 상호작용을 개선합니다.
ChakraUI
사용하기 쉽고 사용자 지정이 자유로운 필수 컴포넌트 모음으로 접근성 높은 웹 애플리케이션을 빠르고 효율적으로 만드세요.
cmdk
이 컴포넌트는 사용자 경험과 개발자의 유연성에 모두 초점을 맞춘 React용 종합 명령 메뉴 솔루션입니다.