okinawaa/ark

Ark is a collection of headless user interface components for building web applications. It provides the interactive building blocks you need for a website or app, things like dropdown menus, tabs, sliders, date pickers, and dialog boxes. The library is designed to work across several popular web frameworks, including React, Solid, and Vue, with Svelte support noted as planned for the future. The key concept here is "headless." Most UI component libraries give you a pre-styled button or menu, which means you have to either use their visual design or spend time overriding it. A headless library handles only the behavior, keyboard navigation, focus management, accessibility, and state, without forcing any specific visual styling. You bring your own design and CSS, and the library makes sure the underlying functionality works correctly behind the scenes. A founder or PM building a custom design system would find this useful. If you want your application to have a unique look that matches your brand, rather than the generic appearance of standard component libraries, this approach gives you full visual control. It also saves your team from manually solving difficult interaction problems, such as making a calendar picker work well with keyboard input or ensuring a popover is accessible to screen readers. You get the complex logic out of the box and apply your own visual styling on top. The project is notable for being framework-agnostic. Instead of building separate libraries from scratch for React, Vue, and Solid, it relies on a state management tool called Zag.js to power the core logic. This allows the same underlying behavior to be shared across different frameworks, meaning a component behaves consistently whether your team is using React or Vue.