ark

Ark UI는 Chakra UI 팀이 유지 관리하는 오픈 소스 headless 컴포넌트 라이브러리입니다. 이 라이브러리는 디자인 시스템과 웹 애플리케이션 구축을 위한 스타일이 없는 로직과 접근성 레이어를 제공하며, 모든 시각적 스타일링은 개발자의 몫으로 남겨둡니다. **핵심 접근 방식** 이 프로젝트는 컴포넌트의 동작과 외형을 분리합니다. 모든 컴포넌트는 기본 스타일 없이 제공되므로, 팀은 Tailwind, Panda CSS, Emotion이나 Styled Components와 같은 CSS-in-JS 솔루션, CSS Modules 또는 일반 CSS를 적용할 수 있습니다. 명시된 목표는 디자인 시스템 작성자가 검증된 상호작용 및 접근성 동작을 상속받으면서 프레젠테이션에 대한 완전한 제어권을 갖도록 하는 것입니다. **아키텍처** 컴포넌트 로직은 Zag.js 유한 상태 머신(finite state machines)을 기반으로 구축되었습니다. README에 따르면, 이를 통해 예측 가능하고 타입 안전한 상태 전환, 더 쉬운 테스트 및 디버깅, 그리고 더 적은 엣지 케이스를 구현할 수 있습니다. 동일한 컴포넌트 동작이 React, Solid, Vue, Svelte를 위한 별도의 패키지를 통해 제공되므로, 디자인 시스템은 로직을 다시 작성하지 않고도 여러 프레임워크에서 하나의 API 표면을 공유할 수 있습니다. 각 패키지는 TypeScript로 완전히 타입화되어 있습니다. **접근성** README에 따르면 컴포넌트들은 WAI-ARIA 디자인 패턴을 따르며 보조 기술로 테스트되었습니다. 적절한 ARIA 속성 및 역할, 키보드 내비게이션, 포커스 관리, 스크린 리더 공지 및 RTL 지원 등의 기능이 포함되어 있다고 주장합니다. **컴포넌트** Ark UI는 대략 다음과 같이 그룹화된 45개 이상의 컴포넌트를 홍보합니다: - 레이아웃 및 내비게이션: Accordion, Tabs, Splitter, Steps, Tree View, Tour - 오버레이: Dialog, Popover, Tooltip, Hover Card, Bottom Sheet, Floating Panel - 폼 및 입력: Checkbox, Radio Group, Select, Combobox, Number Input, Pin Input, Tags Input, Editable, File Upload, Color Picker, Date Picker, Password Input, Signature Pad, Slider, Angle Slider, Rating Group, Switch, Toggle 및 Toggle Group - 데이터 표시: Avatar, Highlight, Progress, QR Code, Format, JSON Tree View, Marquee - 유틸리티: Carousel, Clipboard, Collapsible, Field 및 Fieldset, Menu, Pagination, Portal, Presence, Scroll Area, Segment Group, Timer, Toast, Client Only, Download Trigger, Focus Trap, Frame, Collection, Listbox **설치 및 사용법** 각 프레임워크는 자체 npm 패키지(`@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/vue`, `@ark-ui/svelte`)를 가지고 있습니다. 컴포넌트는 `@ark-ui/react/dialog`와 같이 컴포넌트별로 임포트되며, Root, Trigger, Backdrop, Positioner, Content, Title, Description 및 CloseTrigger와 같은 프리미티브로 구성됩니다. README는 네 가지 프레임워크 모두에서 거의 동일한 마크업으로 렌더링되는 Dialog 예시를 보여줍니다. **생태계** Ark UI는 Chakra UI v3의 기반이며, README에서는 이를 기반으로 구축된 스타일드 컴포넌트 세트인 Park UI와 Tark UI에 대해서도 언급합니다. 별도의 integrations 폴더는 AI 지원 개발을 위한 MCP 서버를 제공합니다. **문서 및 커뮤니티** 가이드, 컴포넌트별 API 참조, 예제 및 스타일링 레시피는 ark-ui.com에서 확인할 수 있습니다. 이 프로젝트는 Discord 커뮤니티, 기능 요청을 위한 공개 Canny 로드맵, 그리고 블로그를 운영하고 있습니다. 기여는 기여 가이드를 통해 가능하며, 지원은 문서, Discord 및 GitHub 이슈를 통해 이루어집니다. 개발은 Open Collective를 통해 자금을 지원받으며, 프로젝트는 MIT 라이선스 하에 출시되었습니다.