Ark UI

Ark UI ships one implementation of each component to React, Vue, Svelte and Solid, built on Zag.js state machines. The behaviour lives in the machine and each framework gets a thin binding, so a dialog behaves identically everywhere.

At a glance

Install	@ark-ui/react, -vue, -svelte, -solid
Engine	Zag.js finite state machines
Styling	none, components split into parts
MCP server	yes, one per framework
Docs for agents	per-framework llms.txt, per-page markdown
License	MIT

Install

npm install @ark-ui/react

What the code looks like

The same part names appear in every framework, which is the whole point.

import { Dialog } from "@ark-ui/react/dialog"

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Title>Rename</Dialog.Title>
      <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Best-in-class agent documentation

Ark publishes an MCP server per framework, four full llms.txt files, and any single page as markdown:

curl https://ark-ui.com/llms.txt/components/accordion?framework=vue

Choose it if

• A design system has to reach more than one framework without forking.
• You want behaviour specified as a state machine you can reason about and test.

Look elsewhere if

• You are single-framework and want the largest community. Radix or Base UI have more examples in React.
• You dislike debugging through an abstraction. Tracing a bug means reading Zag.js, not component code.