ADR: Ariakit as the base

[mayank99]

StrataKit components are built on top of Ariakit, an unstyled accessibility-focused library of React components.

Below is a breakdown comparing Ariakit and React Aria, the two main headless/unstyled UI libraries that were considered when StrataKit started. I've also included Radix UI for the sake of completion; it is a seriously impressive option that I wish was better maintained.

Note

This was originally authored in August 2024.

Comparison table of headless libraries

Library	Pros	Cons
Ariakit	Well-maintained, extremely stable, and thoughtfully designed for ease of use and flexibility. (This is one of the oldest unstyled libraries, it used to be called Reakit.) Accessibility-focused, faithful to ARIA spec. Compatible with standards and community conventions, which enables mixing-and-matching components with other libraries. Provides low-level accessibility primitives (e.g. Composite) for building complex custom components. All components are independently usable without bringing in the whole library. (Bonus) Core of the library is decoupled from React, so it's possible there may be non-React flavors available in the future.	Missing some larger components, such as DatePicker, Tree, and Table. Documentation is a bit sparse in a few spots. Technically still "0.x", which could cause issues with semver/lockfile version management.
React Aria	Accessibility-focused, with lots of research and testing done on every component. Backed by Adobe. Forms the basis of their Spectrum design system. Provides lots of components, including many larger ones like DatePicker and Table. Provides lower level hooks for building custom components. Intentionally designed to work well on touch-screens.	Diverges significantly from standards and community conventions, which makes it difficult to interop with other components and sometimes leads to unexpected behavior. (e.g. "press" events instead of standard "click"; non-standard use of "slot" attribute). Quite opinionated, and not very composable/flexible when you want to diverge from the default usage. (e.g. "Button" cannot be rendered as a "Link") Low-level hooks come with a steep learning curve which makes them difficult to use. Fairly new (the components were only released in 2023), so the API shape could change in the future.
Radix UI	High-quality, well-designed, easy to use, flexible (similar to Ariakit). Compatible with standards and community conventions (similar to Ariakit). All components are independently usable without bringing in the whole library (similar to Ariakit).	Development has more or less stalled. New updates are mostly small bug fixes. Most of the developers that originally created Radix have left after the company was acquired. Missing some larger components and even some more common/basic ones (like ComboBox).

(I did also look at some other libraries, such as Headless UI, Base UI, and Zag/Ark, but none of them are what I would consider to be serious contenders to the above in terms of overall quality.)

---

Ultimately, we are still responsible for building the actual components. The main purpose of a headless component library is to give us an accessible base and save us time & effort without getting in our way. I believe Ariakit does that better than React Aria. We can always reach for other libraries in the places where Ariakit falls short.

Addendum (August 2025)

A year later, there are a few things worth calling out:

1. We feel confident in our decision to use Ariakit as the base.
   • Ariakit APIs are very intuitive, predictable, and align with the way we think when building StrataKit. The stores and providers integrate seamlessly into the components.
   • Additionally — and this was an unexpected benefit — we have found Ariakit's utilities, such as Role and Collection, to be incredibly useful. We are able to consistently use base features (such as render/autoFocus/accessibleWhenDisabled) in all components without any added effort.
   • The biggest issues with Ariakit that we have run into have all been performance-related. While Ariakit does tend to improve performance from time to time, we have also been able to work around these issues within StrataKit.
2. React Aria has received a few updates and new features, but is still not suitable as the base.
   • The most important change in React Aria is the support for DOM props which improves interop (something that was called out in the cons listed above). This would make it easier to use some parts of React Aria for specific features, while keeping Ariakit as the base.
   • Advanced customization is still one of React Aria's biggest weaknesses. You basically have to give up using the components and instead use the hooks API, which means rebuilding a lot of what is already offered by the components. Additionally, React Aria is still too opinionated (and frankly, a bit over-engineered) — they take a lot of liberty in making large decisions, which we may not always agree with at StrataKit.
3. Radix UI has grown in popularity but continues to be in maintenance mode. There have been very few commits, and most github issues get ignored. Their most high-profile consumers (i.e. shadcn/ui) are even considering moving away to a different headless library.

[mayank99]

December 2025 update

This is largely superseded by #1116.

While Ariakit might still be used by any bespoke components in the future (TBD), it will be no longer be used as the "base".