Repository files navigation

Build scalable design systems with unstyled, accessible UI components

Documentation •Installation •Features •Components •Roadmap •Contributing

Ark UI is a headless component library that provides the foundation for building high-quality, accessible design systemsand web applications. Built on top ofZag.js state machines, Ark UI delivers robust,framework-agnostic component logic with perfect parity acrossReact,Solid,Vue, andSvelte.

• 🎨 Completely Unstyled - Zero styling opinions. Bring your own styles with CSS-in-JS, Tailwind, vanilla CSS, orany styling solution
• ♿️ Accessibility First - WCAG compliant components tested with real assistive technologies out of the box
• 🔄 State Machine Powered - Predictable, testable behavior powered by Zag.js finite state machines
• 🌍 Multi-Framework - Same API across React, Solid, Vue, and Svelte - write once, use everywhere
• 📦 Truly Composable - Granular component primitives that work together seamlessly
• ⚡️ Production Ready - Battle-tested in products like Chakra UI, used by teams at OVHCloud, PluralSight, and more
• 🎯 Type-Safe - Fully typed with TypeScript for exceptional developer experience

Choose your framework and install the corresponding package:

# Reactnpm install @ark-ui/react# Solidnpm install @ark-ui/solid# Vuenpm install @ark-ui/vue# Sveltenpm install @ark-ui/svelte

Here's a simple example showing how consistent the API is across frameworks:

import{Dialog}from'@ark-ui/react/dialog'exportconstMyDialog=()=>(<Dialog.Root><Dialog.Trigger>Open Dialog</Dialog.Trigger><Dialog.Backdrop/><Dialog.Positioner><Dialog.Content><Dialog.Title>Dialog Title</Dialog.Title><Dialog.Description>Dialog description</Dialog.Description><Dialog.CloseTrigger>Close</Dialog.CloseTrigger></Dialog.Content></Dialog.Positioner></Dialog.Root>)

<script setup lang="ts">import {Dialog }from'@ark-ui/vue/dialog'</script><template>  <Dialog.Root>    <Dialog.Trigger>Open Dialog</Dialog.Trigger>    <Dialog.Backdrop />    <Dialog.Positioner>      <Dialog.Content>        <Dialog.Title>Dialog Title</Dialog.Title>        <Dialog.Description>Dialog description</Dialog.Description>        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>      </Dialog.Content>    </Dialog.Positioner>  </Dialog.Root></template>

import{Dialog}from'@ark-ui/solid/dialog'exportconstMyDialog=()=>(<Dialog.Root><Dialog.Trigger>Open Dialog</Dialog.Trigger><Dialog.Backdrop/><Dialog.Positioner><Dialog.Content><Dialog.Title>Dialog Title</Dialog.Title><Dialog.Description>Dialog description</Dialog.Description><Dialog.CloseTrigger>Close</Dialog.CloseTrigger></Dialog.Content></Dialog.Positioner></Dialog.Root>)

<scriptlang="ts">import {Dialog }from'@ark-ui/svelte/dialog'</script><Dialog.Root>  <Dialog.Trigger>Open Dialog</Dialog.Trigger>  <Dialog.Backdrop />  <Dialog.Positioner>    <Dialog.Content>      <Dialog.Title>Dialog Title</Dialog.Title>      <Dialog.Description>Dialog description</Dialog.Description>      <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>    </Dialog.Content>  </Dialog.Positioner></Dialog.Root>

Every component is completely unstyled, giving you total control over your design. Use any styling solution:

// Tailwind CSS<Dialog.TriggerclassName="px-4 py-2 bg-blue-500 rounded">Open</Dialog.Trigger>// CSS-in-JS<Dialog.Triggercss={{padding:'8px 16px',background:'blue'}}>Open</Dialog.Trigger>// Vanilla CSS<Dialog.TriggerclassName="my-button">Open</Dialog.Trigger>

All components follow WAI-ARIA design patterns and are tested with screen readers:

• ✅ Proper ARIA attributes and roles
• ✅ Keyboard navigation support
• ✅ Focus management
• ✅ Screen reader announcements
• ✅ RTL support

Powered by Zag.js, each component uses finite state machines for predictable behavior:

• 🔒 Type-safe state transitions
• 🧪 Easier to test and debug
• 🐛 Fewer edge cases and bugs
• 📊 Visualizable component logic

Maintain a single design system across multiple frameworks without rewriting component logic:

// Same API, same behavior, different frameworksconstpackages=['@ark-ui/react','@ark-ui/solid','@ark-ui/vue','@ark-ui/svelte']

Ark UI provides45+ production-ready components covering common UI patterns:

• 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

View all components →

Visitark-ui.com for:

• 📖 Comprehensive guides and tutorials
• 📚 Detailed API references for each component
• 💡 Interactive examples and recipes
• 🎓 Styling guides for popular frameworks
• 🔧 TypeScript usage patterns

• Chakra UI v3 - A simple, modular component library
• Park UI - Beautifully designed components built with Ark UI and Panda CSS
• Tark UI - Ark UI components styled with Tailwind CSS

Ark UI works seamlessly with:

• Panda CSS
• Tailwind CSS
• Styled Components
• Emotion
• Vanilla CSS, CSS Modules, and more

• MCP Server - AI-assisted development with Claudeand other AI agents

• 💬Discord - Join our community for help and discussions
• 🐦Twitter - Follow us for updates and announcements
• 🗺️Roadmap - Request features and vote on upcoming work
• 📝Blog - Read about releases and technical deep dives

We welcome contributions! Please read ourContributing Guide to learn about:

• Setting up your development environment
• Our development workflow
• Code conventions and standards
• How to submit pull requests

• 📚 Check ourdocumentation
• 💬 Ask questions onDiscord
• 🐛 Report bugs viaGitHub Issues
• 💡 Request features on ourRoadmap

Ark UI is maintained byChristian Schröter,Segun Adebayo, and the Chakra UI team. Development is supported by our amazingsponsors:

Become a sponsor →

MIT ©Chakra Systems Inc.

Made with ❤️ by theArk UI Community