{"id":13406142,"url":"https://github.com/chakra-ui/ark","last_synced_at":"2026-02-04T16:17:23.449Z","repository":{"id":148390401,"uuid":"557759254","full_name":"chakra-ui/ark","owner":"chakra-ui","description":"Build your design system with React, Svelte, Vue, and Solid. Powered by State Machines","archived":false,"fork":false,"pushed_at":"2025-05-14T06:53:08.000Z","size":41584,"stargazers_count":4298,"open_issues_count":7,"forks_count":139,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-05-14T07:48:41.496Z","etag":null,"topics":["components","design-system","headless","react","solid","svelte","ui","vue"],"latest_commit_sha":null,"homepage":"https://ark-ui.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chakra-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":"segunadebayo","open_collective":"chakra-ui","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-10-26T08:49:36.000Z","updated_at":"2025-05-13T15:04:29.000Z","dependencies_parsed_at":"2023-09-22T04:05:50.758Z","dependency_job_id":"8d8c79e6-795f-4d31-b294-10d891806cae","html_url":"https://github.com/chakra-ui/ark","commit_stats":{"total_commits":3490,"total_committers":53,"mean_commits":65.84905660377359,"dds":0.6111747851002866,"last_synced_commit":"2aca247f1f59c06947cf6ac8895a6336fa7af3fa"},"previous_names":[],"tags_count":415,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chakra-ui","download_url":"https://codeload.github.com/chakra-ui/ark/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101579,"owners_count":22014904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","design-system","headless","react","solid","svelte","ui","vue"],"created_at":"2024-07-30T19:02:22.297Z","updated_at":"2026-02-04T16:17:23.442Z","avatar_url":"https://github.com/chakra-ui.png","language":"TypeScript","readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ark-ui.com\"\u003e\n    \u003cimg src=\"https://ark-ui.com/images/ark-logo-on-brand.svg\" alt=\"Ark UI\" height=\"64\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eBuild scalable design systems with unstyled, accessible UI components\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/chakra-ui/ark/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@ark-ui/react?style=for-the-badge\" alt=\"MIT License\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ark-ui/react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@ark-ui/react?style=for-the-badge\" alt=\"npm downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/chakra-ui/ark/\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/chakra-ui/ark?logo=github\u0026style=for-the-badge\" alt=\"GitHub stars\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://discord.gg/ww6HE5xaZ2\"\u003e\u003cimg src=\"https://img.shields.io/discord/660863154703695893?label=discord\u0026logo=discord\u0026style=for-the-badge\" alt=\"Discord\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ark-ui.com\"\u003eDocumentation\u003c/a\u003e •\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#components\"\u003eComponents\u003c/a\u003e •\n  \u003ca href=\"https://ark-ui.canny.io/\"\u003eRoadmap\u003c/a\u003e •\n  \u003ca href=\"CONTRIBUTING.md\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## Overview\n\nArk UI is a headless component library that provides the foundation for building high-quality, accessible design systems\nand web applications. Built on top of [Zag.js](https://zagjs.com) state machines, Ark UI delivers robust,\nframework-agnostic component logic with perfect parity across **React**, **Solid**, **Vue**, and **Svelte**.\n\n### Why Ark UI?\n\n- **🎨 Completely Unstyled** - Zero styling opinions. Bring your own styles with CSS-in-JS, Tailwind, vanilla CSS, or\n  any styling solution\n- **♿️ Accessibility First** - WCAG compliant components tested with real assistive technologies out of the box\n- **🔄 State Machine Powered** - Predictable, testable behavior powered by Zag.js finite state machines\n- **🌍 Multi-Framework** - Same API across React, Solid, Vue, and Svelte - write once, use everywhere\n- **📦 Truly Composable** - Granular component primitives that work together seamlessly\n- **⚡️ Production Ready** - Battle-tested in products like Chakra UI, used by teams at OVHCloud, PluralSight, and more\n- **🎯 Type-Safe** - Fully typed with TypeScript for exceptional developer experience\n\n## Installation\n\nChoose your framework and install the corresponding package:\n\n```bash\n# React\nnpm install @ark-ui/react\n\n# Solid\nnpm install @ark-ui/solid\n\n# Vue\nnpm install @ark-ui/vue\n\n# Svelte\nnpm install @ark-ui/svelte\n```\n\n## Quick Start\n\nHere's a simple example showing how consistent the API is across frameworks:\n\n### React\n\n```tsx\nimport { Dialog } from '@ark-ui/react/dialog'\n\nexport const MyDialog = () =\u003e (\n  \u003cDialog.Root\u003e\n    \u003cDialog.Trigger\u003eOpen Dialog\u003c/Dialog.Trigger\u003e\n    \u003cDialog.Backdrop /\u003e\n    \u003cDialog.Positioner\u003e\n      \u003cDialog.Content\u003e\n        \u003cDialog.Title\u003eDialog Title\u003c/Dialog.Title\u003e\n        \u003cDialog.Description\u003eDialog description\u003c/Dialog.Description\u003e\n        \u003cDialog.CloseTrigger\u003eClose\u003c/Dialog.CloseTrigger\u003e\n      \u003c/Dialog.Content\u003e\n    \u003c/Dialog.Positioner\u003e\n  \u003c/Dialog.Root\u003e\n)\n```\n\n### Vue\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { Dialog } from '@ark-ui/vue/dialog'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cDialog.Root\u003e\n    \u003cDialog.Trigger\u003eOpen Dialog\u003c/Dialog.Trigger\u003e\n    \u003cDialog.Backdrop /\u003e\n    \u003cDialog.Positioner\u003e\n      \u003cDialog.Content\u003e\n        \u003cDialog.Title\u003eDialog Title\u003c/Dialog.Title\u003e\n        \u003cDialog.Description\u003eDialog description\u003c/Dialog.Description\u003e\n        \u003cDialog.CloseTrigger\u003eClose\u003c/Dialog.CloseTrigger\u003e\n      \u003c/Dialog.Content\u003e\n    \u003c/Dialog.Positioner\u003e\n  \u003c/Dialog.Root\u003e\n\u003c/template\u003e\n```\n\n### Solid\n\n```tsx\nimport { Dialog } from '@ark-ui/solid/dialog'\n\nexport const MyDialog = () =\u003e (\n  \u003cDialog.Root\u003e\n    \u003cDialog.Trigger\u003eOpen Dialog\u003c/Dialog.Trigger\u003e\n    \u003cDialog.Backdrop /\u003e\n    \u003cDialog.Positioner\u003e\n      \u003cDialog.Content\u003e\n        \u003cDialog.Title\u003eDialog Title\u003c/Dialog.Title\u003e\n        \u003cDialog.Description\u003eDialog description\u003c/Dialog.Description\u003e\n        \u003cDialog.CloseTrigger\u003eClose\u003c/Dialog.CloseTrigger\u003e\n      \u003c/Dialog.Content\u003e\n    \u003c/Dialog.Positioner\u003e\n  \u003c/Dialog.Root\u003e\n)\n```\n\n### Svelte\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { Dialog } from '@ark-ui/svelte/dialog'\n\u003c/script\u003e\n\n\u003cDialog.Root\u003e\n  \u003cDialog.Trigger\u003eOpen Dialog\u003c/Dialog.Trigger\u003e\n  \u003cDialog.Backdrop /\u003e\n  \u003cDialog.Positioner\u003e\n    \u003cDialog.Content\u003e\n      \u003cDialog.Title\u003eDialog Title\u003c/Dialog.Title\u003e\n      \u003cDialog.Description\u003eDialog description\u003c/Dialog.Description\u003e\n      \u003cDialog.CloseTrigger\u003eClose\u003c/Dialog.CloseTrigger\u003e\n    \u003c/Dialog.Content\u003e\n  \u003c/Dialog.Positioner\u003e\n\u003c/Dialog.Root\u003e\n```\n\n## Features\n\n### Zero-Styling Freedom\n\nEvery component is completely unstyled, giving you total control over your design. Use any styling solution:\n\n```tsx\n// Tailwind CSS\n\u003cDialog.Trigger className=\"px-4 py-2 bg-blue-500 rounded\"\u003eOpen\u003c/Dialog.Trigger\u003e\n\n// CSS-in-JS\n\u003cDialog.Trigger css={{ padding: '8px 16px', background: 'blue' }}\u003eOpen\u003c/Dialog.Trigger\u003e\n\n// Vanilla CSS\n\u003cDialog.Trigger className=\"my-button\"\u003eOpen\u003c/Dialog.Trigger\u003e\n```\n\n### Accessibility Built-In\n\nAll components follow WAI-ARIA design patterns and are tested with screen readers:\n\n- ✅ Proper ARIA attributes and roles\n- ✅ Keyboard navigation support\n- ✅ Focus management\n- ✅ Screen reader announcements\n- ✅ RTL support\n\n### State Machine Architecture\n\nPowered by Zag.js, each component uses finite state machines for predictable behavior:\n\n- 🔒 Type-safe state transitions\n- 🧪 Easier to test and debug\n- 🐛 Fewer edge cases and bugs\n- 📊 Visualizable component logic\n\n### Framework Parity\n\nMaintain a single design system across multiple frameworks without rewriting component logic:\n\n```tsx\n// Same API, same behavior, different frameworks\nconst packages = ['@ark-ui/react', '@ark-ui/solid', '@ark-ui/vue', '@ark-ui/svelte']\n```\n\n## Components\n\nArk UI provides **45+ production-ready components** covering common UI patterns:\n\n### Layout \u0026 Navigation\n\n- Accordion\n- Tabs\n- Splitter\n- Steps\n- Tree View\n- Tour\n\n### Overlays \u0026 Dialogs\n\n- Dialog\n- Popover\n- Tooltip\n- Hover Card\n- Bottom Sheet\n- Floating Panel\n\n### Forms \u0026 Inputs\n\n- Checkbox\n- Radio Group\n- Select\n- Combobox\n- Number Input\n- Pin Input\n- Tags Input\n- Editable\n- File Upload\n- Color Picker\n- Date Picker\n- Password Input\n- Signature Pad\n- Slider\n- Angle Slider\n- Rating Group\n- Switch\n- Toggle / Toggle Group\n\n### Data Display\n\n- Avatar\n- Highlight\n- Progress\n- QR Code\n- Format\n- JSON Tree View\n- Marquee\n\n### Utilities\n\n- Carousel\n- Clipboard\n- Collapsible\n- Field / Fieldset\n- Menu\n- Pagination\n- Portal\n- Presence\n- Scroll Area\n- Segment Group\n- Timer\n- Toast\n- Client Only\n- Download Trigger\n- Focus Trap\n- Frame\n- Collection\n- Listbox\n\n[View all components →](https://ark-ui.com/docs/overview/introduction)\n\n## Documentation\n\nVisit [ark-ui.com](https://ark-ui.com) for:\n\n- 📖 Comprehensive guides and tutorials\n- 📚 Detailed API references for each component\n- 💡 Interactive examples and recipes\n- 🎓 Styling guides for popular frameworks\n- 🔧 TypeScript usage patterns\n\n## Ecosystem\n\n### Built with Ark UI\n\n- **[Chakra UI v3](https://chakra-ui.com)** - A simple, modular component library\n- **[Park UI](https://park-ui.com)** - Beautifully designed components built with Ark UI and Panda CSS\n- **[Tark UI](https://www.tarkui.com/)** - Ark UI components styled with Tailwind CSS\n\n### Styling Libraries\n\nArk UI works seamlessly with:\n\n- [Panda CSS](https://panda-css.com)\n- [Tailwind CSS](https://tailwindcss.com)\n- [Styled Components](https://styled-components.com)\n- [Emotion](https://emotion.sh)\n- Vanilla CSS, CSS Modules, and more\n\n### Developer Tools\n\n- **[MCP Server](https://github.com/chakra-ui/ark/tree/main/integrations/mcp)** - AI-assisted development with Claude\n  and other AI agents\n\n## Community\n\n- 💬 [Discord](https://discord.gg/ww6HE5xaZ2) - Join our community for help and discussions\n- 🐦 [Twitter](https://twitter.com/ark_ui_) - Follow us for updates and announcements\n- 🗺️ [Roadmap](https://ark-ui.canny.io/) - Request features and vote on upcoming work\n- 📝 [Blog](https://ark-ui.com/blog) - Read about releases and technical deep dives\n\n## Contributing\n\nWe welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to learn about:\n\n- Setting up your development environment\n- Our development workflow\n- Code conventions and standards\n- How to submit pull requests\n\n## Support\n\n- 📚 Check our [documentation](https://ark-ui.com)\n- 💬 Ask questions on [Discord](https://discord.gg/ww6HE5xaZ2)\n- 🐛 Report bugs via [GitHub Issues](https://github.com/chakra-ui/ark/issues)\n- 💡 Request features on our [Roadmap](https://ark-ui.canny.io/)\n\n## Sponsors\n\nArk UI is maintained by [Christian Schröter](https://github.com/cschroeter),\n[Segun Adebayo](https://github.com/segunadebayo), and the Chakra UI team. Development is supported by our amazing\nsponsors:\n\n[Become a sponsor →](https://opencollective.com/chakra-ui)\n\n## License\n\nMIT © [Chakra Systems Inc.](https://github.com/chakra-ui)\n\n---\n\n\u003cp align=\"center\"\u003e\n  Made with ❤️ by the \u003ca href=\"https://github.com/chakra-ui/ark/graphs/contributors\"\u003eArk UI Community\u003c/a\u003e\n\u003c/p\u003e\n","funding_links":["https://patreon.com/segunadebayo","https://opencollective.com/chakra-ui"],"categories":["TypeScript","Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Fark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchakra-ui%2Fark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Fark/lists"}