[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71422":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":39,"discoverSource":40},71422,"ark","chakra-ui\u002Fark","chakra-ui","Unstyled, accessible UI components for your design System. Works in React, Vue, Solid, and Svelte.","https:\u002F\u002Fark-ui.com",null,"TypeScript",5221,199,22,2,0,4,15,55,12,83.9,"MIT License",false,"main",[26,27,28,29,30,31,32,33,34,35],"components","design-system","headless","primitives","react","solid","svelte","ui","unstyled","vue","2026-06-12 04:01:00","\u003Cbr \u002F>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fark-ui.com\">\n    \u003Cimg src=\"https:\u002F\u002Fark-ui.com\u002Fimages\u002Fark-logo-on-brand.svg\" alt=\"Ark UI\" height=\"64\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>Build scalable design systems with unstyled, accessible UI components\u003C\u002Fstrong>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fark\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@ark-ui\u002Freact?style=for-the-badge\" alt=\"MIT License\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@ark-ui\u002Freact\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002F@ark-ui\u002Freact?style=for-the-badge\" alt=\"npm downloads\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fark\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fchakra-ui\u002Fark?logo=github&style=for-the-badge\" alt=\"GitHub stars\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fww6HE5xaZ2\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F660863154703695893?label=discord&logo=discord&style=for-the-badge\" alt=\"Discord\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fark-ui.com\">Documentation\u003C\u002Fa> •\n  \u003Ca href=\"#installation\">Installation\u003C\u002Fa> •\n  \u003Ca href=\"#features\">Features\u003C\u002Fa> •\n  \u003Ca href=\"#components\">Components\u003C\u002Fa> •\n  \u003Ca href=\"https:\u002F\u002Fark-ui.canny.io\u002F\">Roadmap\u003C\u002Fa> •\n  \u003Ca href=\"CONTRIBUTING.md\">Contributing\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cbr \u002F>\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:\u002F\u002Fzagjs.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\u002Freact\n\n# Solid\nnpm install @ark-ui\u002Fsolid\n\n# Vue\nnpm install @ark-ui\u002Fvue\n\n# Svelte\nnpm install @ark-ui\u002Fsvelte\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\u002Freact\u002Fdialog'\n\nexport const MyDialog = () => (\n  \u003CDialog.Root>\n    \u003CDialog.Trigger>Open Dialog\u003C\u002FDialog.Trigger>\n    \u003CDialog.Backdrop \u002F>\n    \u003CDialog.Positioner>\n      \u003CDialog.Content>\n        \u003CDialog.Title>Dialog Title\u003C\u002FDialog.Title>\n        \u003CDialog.Description>Dialog description\u003C\u002FDialog.Description>\n        \u003CDialog.CloseTrigger>Close\u003C\u002FDialog.CloseTrigger>\n      \u003C\u002FDialog.Content>\n    \u003C\u002FDialog.Positioner>\n  \u003C\u002FDialog.Root>\n)\n```\n\n### Vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { Dialog } from '@ark-ui\u002Fvue\u002Fdialog'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDialog.Root>\n    \u003CDialog.Trigger>Open Dialog\u003C\u002FDialog.Trigger>\n    \u003CDialog.Backdrop \u002F>\n    \u003CDialog.Positioner>\n      \u003CDialog.Content>\n        \u003CDialog.Title>Dialog Title\u003C\u002FDialog.Title>\n        \u003CDialog.Description>Dialog description\u003C\u002FDialog.Description>\n        \u003CDialog.CloseTrigger>Close\u003C\u002FDialog.CloseTrigger>\n      \u003C\u002FDialog.Content>\n    \u003C\u002FDialog.Positioner>\n  \u003C\u002FDialog.Root>\n\u003C\u002Ftemplate>\n```\n\n### Solid\n\n```tsx\nimport { Dialog } from '@ark-ui\u002Fsolid\u002Fdialog'\n\nexport const MyDialog = () => (\n  \u003CDialog.Root>\n    \u003CDialog.Trigger>Open Dialog\u003C\u002FDialog.Trigger>\n    \u003CDialog.Backdrop \u002F>\n    \u003CDialog.Positioner>\n      \u003CDialog.Content>\n        \u003CDialog.Title>Dialog Title\u003C\u002FDialog.Title>\n        \u003CDialog.Description>Dialog description\u003C\u002FDialog.Description>\n        \u003CDialog.CloseTrigger>Close\u003C\u002FDialog.CloseTrigger>\n      \u003C\u002FDialog.Content>\n    \u003C\u002FDialog.Positioner>\n  \u003C\u002FDialog.Root>\n)\n```\n\n### Svelte\n\n```svelte\n\u003Cscript lang=\"ts\">\n  import { Dialog } from '@ark-ui\u002Fsvelte\u002Fdialog'\n\u003C\u002Fscript>\n\n\u003CDialog.Root>\n  \u003CDialog.Trigger>Open Dialog\u003C\u002FDialog.Trigger>\n  \u003CDialog.Backdrop \u002F>\n  \u003CDialog.Positioner>\n    \u003CDialog.Content>\n      \u003CDialog.Title>Dialog Title\u003C\u002FDialog.Title>\n      \u003CDialog.Description>Dialog description\u003C\u002FDialog.Description>\n      \u003CDialog.CloseTrigger>Close\u003C\u002FDialog.CloseTrigger>\n    \u003C\u002FDialog.Content>\n  \u003C\u002FDialog.Positioner>\n\u003C\u002FDialog.Root>\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\u002F\u002F Tailwind CSS\n\u003CDialog.Trigger className=\"px-4 py-2 bg-blue-500 rounded\">Open\u003C\u002FDialog.Trigger>\n\n\u002F\u002F CSS-in-JS\n\u003CDialog.Trigger css={{ padding: '8px 16px', background: 'blue' }}>Open\u003C\u002FDialog.Trigger>\n\n\u002F\u002F Vanilla CSS\n\u003CDialog.Trigger className=\"my-button\">Open\u003C\u002FDialog.Trigger>\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\u002F\u002F Same API, same behavior, different frameworks\nconst packages = ['@ark-ui\u002Freact', '@ark-ui\u002Fsolid', '@ark-ui\u002Fvue', '@ark-ui\u002Fsvelte']\n```\n\n## Components\n\nArk UI provides **45+ production-ready components** covering common UI patterns:\n\n### Layout & Navigation\n\n- Accordion\n- Tabs\n- Splitter\n- Steps\n- Tree View\n- Tour\n\n### Overlays & Dialogs\n\n- Dialog\n- Popover\n- Tooltip\n- Hover Card\n- Bottom Sheet\n- Floating Panel\n\n### Forms & 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 \u002F 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 \u002F 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:\u002F\u002Fark-ui.com\u002Fdocs\u002Foverview\u002Fintroduction)\n\n## Documentation\n\nVisit [ark-ui.com](https:\u002F\u002Fark-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:\u002F\u002Fchakra-ui.com)** - A simple, modular component library\n- **[Park UI](https:\u002F\u002Fpark-ui.com)** - Beautifully designed components built with Ark UI and Panda CSS\n- **[Tark UI](https:\u002F\u002Fwww.tarkui.com\u002F)** - Ark UI components styled with Tailwind CSS\n\n### Styling Libraries\n\nArk UI works seamlessly with:\n\n- [Panda CSS](https:\u002F\u002Fpanda-css.com)\n- [Tailwind CSS](https:\u002F\u002Ftailwindcss.com)\n- [Styled Components](https:\u002F\u002Fstyled-components.com)\n- [Emotion](https:\u002F\u002Femotion.sh)\n- Vanilla CSS, CSS Modules, and more\n\n### Developer Tools\n\n- **[MCP Server](https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fark\u002Ftree\u002Fmain\u002Fintegrations\u002Fmcp)** - AI-assisted development with Claude\n  and other AI agents\n\n## Community\n\n- 💬 [Discord](https:\u002F\u002Fdiscord.gg\u002Fww6HE5xaZ2) - Join our community for help and discussions\n- 🐦 [Twitter](https:\u002F\u002Ftwitter.com\u002Fark_ui_) - Follow us for updates and announcements\n- 🗺️ [Roadmap](https:\u002F\u002Fark-ui.canny.io\u002F) - Request features and vote on upcoming work\n- 📝 [Blog](https:\u002F\u002Fark-ui.com\u002Fblog) - 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:\u002F\u002Fark-ui.com)\n- 💬 Ask questions on [Discord](https:\u002F\u002Fdiscord.gg\u002Fww6HE5xaZ2)\n- 🐛 Report bugs via [GitHub Issues](https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fark\u002Fissues)\n- 💡 Request features on our [Roadmap](https:\u002F\u002Fark-ui.canny.io\u002F)\n\n## Sponsors\n\nArk UI is maintained by [Christian Schröter](https:\u002F\u002Fgithub.com\u002Fcschroeter),\n[Segun Adebayo](https:\u002F\u002Fgithub.com\u002Fsegunadebayo), and the Chakra UI team. Development is supported by our amazing\nsponsors:\n\n[Become a sponsor →](https:\u002F\u002Fopencollective.com\u002Fchakra-ui)\n\n## License\n\nMIT © [Chakra Systems Inc.](https:\u002F\u002Fgithub.com\u002Fchakra-ui)\n\n---\n\n\u003Cp align=\"center\">\n  Made with ❤️ by the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fchakra-ui\u002Fark\u002Fgraphs\u002Fcontributors\">Ark UI Community\u003C\u002Fa>\n\u003C\u002Fp>\n","Ark UI 是一个用于构建高质量、无障碍设计系统的无样式UI组件库。它基于Zag.js状态机提供了一套跨框架（React、Solid、Vue和Svelte）的组件逻辑，确保了不同前端框架间的一致性与兼容性。项目核心功能包括完全无样式的组件、内置无障碍支持、通过状态机实现的可预测行为以及高度组合性的组件结构。适用于需要跨多个前端技术栈保持一致用户体验的设计系统开发场景中，特别适合追求高定制化且注重可访问性的团队使用。","2026-06-11 03:37:40","high_star"]