What is the difference between Ark UI and zag?

[mango906]

Hello, I’m planning to create UI components using Ark UI. However, I found the documentation to be somewhat lacking in information for building components. While exploring, I came across the following link:

#2121

From what I can see, it seems that future documentation might be automatically generated from Zag. Should I be referring to Zag’s documentation when using Ark UI?

[Omikorin]

Hi @mango906!

I'll point out the main aspects behind all Chakra team's projects.

• Zag.js - framework-agnostic, ready-made state machines library in vanilla js
• Ark UI - a framework-agnostic wrapper for Zag.js for supported frameworks (you can check in README)
• PandaCSS - build-time CSS-in-JS library, a performant replacement for libraries such as Emotion
• Chakra UI - full design system that uses Ark UI and Emotion (PandaCSS in the future) under the hood

What does it mean?
Zag.js is a library written without any specific framework in mind. You can use it in any vanilla, Web Components, React, Solid, Svelte, and Vue project.

State machines are the source of the behavior of components in Zag.js. To learn more, please check the Zag website or any Wikipedia (YT video is more user-friendly) about state machines, states, and triggers.

Ark UI is a headless component library. It means it comes without any styling solution. When using Ark UI, you are given pure components boosted with logic implementation from Zag.js. You need to use the styling approach of your choice. For example, I recommend PandaCSS as a promising, efficient, and clean solution :)
You can use CSS modules, another CSS-in-JS library, Bootstrap, etc

We can simplify:

• Zag.js - components behavior, logic
• Ark UI - unstyled UI components (using logic from Zag under the hood)
• PandaCSS - nice styling solution, comes with abstracts like HStack, VStack etc
• Chakra UI - styled UI components, theming with much more

If you want to build your UI library I recommend you use Ark UI and refer to its documentation. Whenever you can't find useful information, please check Zag.js documentation, there is more detailed information about the components' logic.