Ark v6 #3616
Description
Status: Draft
Target Release: Q1 2026 (January - March)
Last Updated: November 17, 2025
Overview
Ark UI v6 is all about making your life easier as a developer. We're introducing changes that give you more flexibility and consistency when building user interfaces. Here's what's coming.
Triggers
This change is inspired by an upcoming HTML feature called commandForElement, which allows buttons to have multiple commands associated with them.
What does this mean for Ark UI?
Take the Carousel component, for example. Currently, we have separate trigger components for each action:
<Carousel.Control>
<Carousel.PrevTrigger />
<Carousel.NextTrigger />
<Carousel.AutoplayTrigger />
{/* ... */}
</Carousel.Control>In the next major version, you'll have a single Trigger component that can handle multiple actions via the action prop:
<Carousel.Control>
<Carousel.Trigger action="prev" />
<Carousel.Trigger action="next" />
<Carousel.Trigger action="toggle-autoplay" />
{/* ... */}
</Carousel.Control>With this change, we're also enabling more specific actions, such as separate play and pause controls for autoplay:
<Carousel.Control>
<Carousel.Trigger action="play" />
<Carousel.Trigger action="pause" />
</Carousel.Control>Indicator
Next up, we're redesigning our Indicator components to match specific states and allow you to set fallbacks. At the moment, they look something like this:
<Menu.ItemIndicator>
<CheckIcon />
</Menu.ItemIndicator><Clipboard.Indicator copied={<CheckIcon />}>
<ClipboardCopyIcon />
</Clipboard.Indicator><Checkbox.Indicator>
<CheckIcon />
</Checkbox.Indicator>
<Checkbox.Indicator indeterminate>
<MinusIcon />
</Checkbox.Indicator>Take a look at Menu.ItemIndicator, for example. How do you know it's meant for the selected state of an item? You don't. Additionally, if the item isn't selected, nothing is rendered, making it difficult for flexbox or grid layouts to work properly.
Altogether, these components not only lack consistency but also flexibility. In the next major version, you'll be able to specify the state directly and provide fallbacks for other states:
<Menu.ItemIndicator state="selected" fallback="">
<CheckIcon />
</Menu.ItemIndicator><Clipboard.Indicator state="copied" fallback={<ClipboardCopyIcon />}>
<CheckIcon />
</Clipboard.Indicator><Checkbox.Indicator
state="checked"
fallback={
<Checkbox.Indicator state="indeterminate" fallback={<SquareIcon />}>
<MinusIcon />
</Checkbox.Indicator>
}>
<CheckIcon />
</Checkbox.Indicator>Simplified Data Attributes
We're making the DOM output cleaner and more semantic. Instead of generic data attributes with scope and part information, v6 introduces component-specific data attributes that are easier to understand and work with.
Currently, components generate verbose data attributes that include scope and part information:
<Popover.Trigger>Show Popover</Popover.Trigger>renders
<button id="popover:123:trigger" data-scope="popover" data-part="trigger">Show Popover</button>In v6, we're simplifying this to use concise, component-specific data attributes:
<Popover.Trigger>Show Popover</Popover.Trigger>renders
<button id="popover:123:trigger" data-popover-trigger="123">Show Popover</button>This change is helpful when composing components with asChild as there will no longer be a potential clash of data-part or data-scope attributes.
Anatomy
import { dialogAnatomy } from '@ark-ui/[framework]' // moved
import { dialogAnatomy } from '@ark-ui/[framework]/dialog'import { dialogAnatomy } from '@ark-ui/[framework]/anatomy' // new
import { dialogAnatomy } from '@ark-ui/[framework]/dialog'