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.

[osdiab]

so is it accurate to say that Zag basically contains:

• state machine implementation
• bindings to use the core state machine abstraction for each framework
• state machines that define accessible common UI components
  • (this is what I'm finding counterintuitive, why it lives in Zag and not Ark)
• NOT the bindings for those a11y UI component state machines

whereas Ark contains:

• the bindings for those a11y UI component state machines to each framework

Not sure if I'm understanding right? It's a funky way to split them up.

[xeinebiu]

@Omikorin what do you mean by

Chakra UI - full design system that uses Ark UI and Emotion (PandaCSS in the future) under the hood

@cschroeter @segunadebayo

Can you please clearify this one, if ParkUI is going to be the favorite choice or the Chakra. I am based on the image below, and I can understand that Chakra will still depend on emotion. If that has changed, then where does ParkUI fall ?

chakra-ui/chakra-ui#7785