When to use this library over zagjs?

[sethamus]

Description

When to use this library over zagjs?

Proposed Solution or API

N/A

Additional Information

No response

[cschroeter]

I think the main reason why you would prefer Ark UI over Zag.js is convenience and readability. If you compare both examples I would always prefer the one that uses speaking component names over spreading props.

// From https://zagjs.com/components/react/tabs
export function Tabs() {
  const [state, send] = useMachine(tabs.machine({ id: "1", value: "item-1" }))

  const api = tabs.connect(state, send, normalizeProps)

  return (
    <div {...api.rootProps}>
      <div {...api.tablistProps}>
        {data.map((item) => (
          <button
            {...api.getTriggerProps({ value: item.value })}
            key={item.value}
          >
            {item.label}
          </button>
        ))}
      </div>
      {data.map((item) => (
        <div {...api.getContentProps({ value: item.value })} key={item.value}>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  )
}

// From https://ark-ui.com/docs/react/components/tabs
const Basic = () => (
  <Tabs>
    <TabList>
      <TabTrigger value="react">React</TabTrigger>
      <TabTrigger value="vue">Vue</TabTrigger>
      <TabTrigger value="solid">Solid</TabTrigger>
    </TabList>
    <TabContent value="react">React Content</TabContent>
    <TabContent value="vue">Vue Content</TabContent>
    <TabContent value="solid">Solid Content</TabContent>
  </Tabs>
)

[rolanday]

Had same question. I prefer to spread props, feels more like react-aria, which is where I'm coming from, so thank u for this and zag , as opens door to me as viable react alternative. Other than ergonomics, any other reason for ark? I will say I hit a lot of friction trying ark on solid, where I've hit none with zag (so far at least).

[cschroeter]

At the end of the day it is this flexibility what makes this eco system so great. If you prefer the spread props approach pick zag.js - if you like the composable, declarative way of using components than pick Ark. There is no right or wrong here.

Regarding the hickups you mentioned this will change with the upcoming 1.0 release later this year (aiming for october)

[rolanday]

Thanks Christian,

FYI, I'll take another look once 1.0 releases. If declarative approach meets my needs then I'll start there and fallback to underpinnings (like Zag) where needed. I do this today w/ my React project, where use react-aria-components and fallback to react-aria as needed.

I had no luck whatsoever getting Ark to run on solid-start (even if including it in Vite convig ssr.noExernal list) more of a roadblock than a hiccup. Might be helpful to clarify if support is just for Solid client-side only, or if Solid-Start is also supported. Thanks for taking the time to comment back!