In recent months, we've focused on improving the performance of composite widgets like Combobox and Select. In the latest version, we increased the rendering speed of these components by 20-30% without any API changes. Additionally, we're working on new APIs and a built-in virtualization feature to enhance their performance even more.

useSyncExternalStore

In our measurements, we identified the performance bottleneck as the multiple uses of the useSyncExternalStore (uSES) React hook in composite item components. We even tested calling uSES with no-op stable subscribe and getSnapshot functions. However, React itself seems to perform extra work with each call to this hook compared to useState or useContext.

Each composite item component might call uSES over 10 times. When rendering more than 1,000 items, this could lead to thousands of hook calls. We improved this by consolidating them into a single uSES call.

Important: this doesn’t mean you should avoid using uSES in your components. It’s just that, in our case, we’ve identified it as the issue, and only when rendering hundreds of items.

offscreenBehavior

In addition to working on implementation details, we've added two new experimental props, offscreenBehavior and offscreenRoot, to the CollectionItem, CompositeItem, ComboboxItem, and SelectItem components.

The offscreenBehavior prop determines how the item component behaves when offscreen:

• active (default): No changes occur. The component is fully rendered even when offscreen.

• passive: The component is replaced by a super lightweight version when offscreen. Styles and content are rendered, eliminating the need to estimate size or absolutely position the items, while other React computations are skipped. The element is rendered to be accessible to assistive technologies.

• lazy: Similar to passive, but once the component becomes active, it remains active even when offscreen. You can think of it like the loading="lazy" attribute on image elements.

Currently, these props are available only when importing components from the experimental @ariakit/react-core package:

import { SelectItem } from "@ariakit/react-core/select/select-item-offscreen";

<SelectItem
  offscreenBehavior="lazy"
  offscreenRoot={ref}

Unlike virtualization, offscreenBehavior requires no extra changes to component usage. It is designed to offer the best balance between developer experience and performance.

However, when rendering thousands of items, full virtualization is unmatched, particularly on low-end devices. That's why we are continually improving our experimental virtualization feature, which you can see in action with the select-combobox-virtualized example.

Interaction to Next Paint (INP) numbers

We tested rendering a Combobox component with 1,000 items on a MacBook Pro M1 with a 4x slowdown in production. Here are the results for different compound component libraries:

Opening popup (less is better):

1. Ariakit (virtualized) ≅ 56 ms

2. Headless UI (virtualized) ≅ 128 ms

3. Ariakit (offscreenBehavior) ≅ 168 ms

4. React Aria Components ≅ 368 ms

5. Ariakit ≅ 464 ms

6. Radix UI ≅ 568 ms

7. Headless UI ≅ 2920 ms

Closing popup (less is better):

1. Ariakit (virtualized) ≅ 24 ms

2. Headless UI (virtualized) ≅ 40 ms

3. Ariakit (offscreenBehavior) ≅ 48 ms

4. Ariakit ≅ 120 ms

5. Headless UI ≅ 128 ms

6. React Aria Components ≅ 160 ms

7. Radix UI ≅ 312 ms

Opening, navigating 10 items with arrow keys, then closing (less is better):

1. Ariakit (virtualized) ≅ 400 ms

2. Ariakit (offscreenBehavior) ≅ 536 ms

3. Headless UI (virtualized) ≅ 568 ms

4. Radix UI ≅ 880 ms

5. Ariakit ≅ 984 ms

6. React Aria Components ≅ 1808 ms

7. Headless UI ≅ 4088 ms

Tailwind v4 theme

We’re working on a Tailwind v4 theme with the following features:

• Copy and paste

• Beautiful, accessible, and fully customizable

• Styles for buttons, dialogs, popover, form controls, and more

• Autocomplete support similar to other Tailwind utilities

• Use with any component library: Ariakit, Radix UI, Headless UI, or none at all

• Use with any framework: React, Vue, Svelte, Solid, or none at all

This will be included in Ariakit Plus, so subscribing to Plus today will also grant you access to this product.

Stay tuned for upcoming announcements.

Ariakit Plus Black Friday 🎉

Ariakit Plus already has Black Friday discounts, which you can check out at ariakit.org/plus

Get Ariakit Plus

With Plus, you gain access to a growing collection of exclusive examples, including all current and future ones. You'll also have access to the Tailwind v4 theme upon its release.

Ariakit Plus funds the open-source library and supports its ongoing improvement.

We are on Bluesky

A significant portion of the developer community is moving from Twitter/X to Bluesky, and we are too.

You can find us there:

• @ariakit.org

• @haz.dev

• @ben.ariakit.org

We'll keep sharing work in progress and updates about Ariakit there. While we're not leaving Twitter entirely, expect updates to be prioritized on Bluesky.

Built with Ariakit

• Highlight.io (via email)

• Trigger.dev (tweeted by Matt)

• Kadoa.com (tweeted by Vladstudio)

• Todoist.com (tweeted by Ernesto)

• DrawingsAlive.com (tweeted by Guilherme)

• Cleeve.app (tweeted by Christian)

If you've created something using Ariakit and want it featured in our next newsletter, just share your work on Bluesky mentioning @ariakit.org, or reply to this email.

More Ariakit

• New releases:

  v0.4.6 → v0.4.14

Over the past few months, we've been developing some thrilling new features for Ariakit. The most significant ones are the Tag components and the ability to render Tabs within Combobox and Select popovers.

In a future post, I'll delve into more details about Tag components, which are still in the experimental phase. But for today, let's reintroduce Tabs.

We've got a couple of new examples that demonstrate how to use Tabs in both Combobox and Select widgets:

• Combobox with Tabs

• Select with Combobox and Tabs

In short, just render the Tab components inside a Combobox or Select popover, and Ariakit will automatically adjust roles and other ARIA attributes. This ensures the widget is accessible for mouse, touch, keyboard, and assistive technology users:

<ComboboxProvider>
  <Combobox />
  <ComboboxPopover>
    <TabProvider>
      <TabList>
        <Tab />
      </TabList>
      <TabPanel unmountOnHide>
        <ComboboxList>
          <ComboboxItem />
        </ComboboxList>
      </TabPanel>
    </TabProvider>
  </ComboboxPopover>
</ComboboxProvider>

Ensure the TabPanel component is dynamically rendered. You can achieve this either by using the unmountOnHide prop or by rendering a single TabPanel with dynamic content that changes according to the currently selected tab.

We are on LinkedIn

Ariakit is now also on LinkedIn: https://www.linkedin.com/company/ariakit/

We'll share announcements, experiments, and ongoing projects there. If you're active on LinkedIn and this topic sparks your curiosity, we'd value your follow. Interacting with and liking our posts will help us spread the word. ❤️

Built with Ariakit

• RelativeCI (tweeted by Vio)

If you've created something using Ariakit and want it featured in our next newsletter, just share your work on Twitter mentioning @ariakitjs, or reply to this email.

More Ariakit

• New examples:
  Select with Next.js App Router (Plus)
  Animated TabPanel (Plus)
  Animated Disclosure (Plus)
  Select with Combobox and Tabs (Plus)

• Improved examples:

  Animated Combobox
  Animated Dialog
  Animated Select
  Combobox with Tabs (Plus)

• New releases:

  v0.4.1 → v0.4.6

Ariakit v0.4.0 has improved support for CSS transitions and animations. To animate Dialog, Popover, Menu, Tooltip, and other popup components, you can simply add CSS transitions or animations using the [data-open], [data-enter], and [data-leave] selectors.

If an animation is detected, the component will automatically wait for the exit animation to finish before hiding itself or removing it from the DOM:

.dialog {
  opacity: 0;
  transition: opacity 0.3s;
}

.dialog[data-enter] {
  opacity: 1;
}

This also works seamlessly with libraries like tailwindcss-animate:

<Dialog className="
  data-[open]:animate-in
  data-[open]:fade-in
  data-[leave]:animate-out
  data-[leave]:fade-out
">

Previously, we only supported CSS transitions (not animations), and it was necessary to explicitly pass an animated prop to the component provider or store to enable this behavior. They're both supported right out of the box now.

Check out the release notes to learn more.

Ariakit Plus with lifetime access

Ariakit Plus grants you access to exclusive content and features on the site.

In response to popular demand, it is now available as a one-time purchase. This includes free lifetime updates. Get access to all examples available today, as well as those planned for the future, which includes full-featured templates.

Get Ariakit Plus

For existing subscribers

If you're already a monthly or yearly subscriber, don’t worry, nothing has changed.

But if you're interested in getting Ariakit Plus with lifetime access, a discount awaits you. Simply visit ariakit.org/plus and sign in with your account. The discount is applied automatically.

After you complete your purchase, there's no need for further action. Your subscription will automatically transition to lifetime access, and future charges will stop.

If you have any questions about Ariakit Plus, feel free to contact support@ariakit.org

Built with Ariakit

• Attio (tweeted by Alex Krasikau)

• Flow (tweeted by Daniel)

If you've created something using Ariakit and want it featured in our next newsletter, just share your work on Twitter/X mentioning @ariakitjs, or reply to this email.

More Ariakit

• New examples:
  Radix Combobox
  Submenu with Combobox (Plus)
  Combobox with Tabs (Plus)
  Radix Select with Combobox
  Command Menu (Plus)

• Improved examples:

  Multi-selectable Combobox

• Improved docs:

  Guide: Composition
  Guide: Styling
  API Reference: Combobox

• New releases:

  v0.3.8 → v0.4.1

More Dev

• Do you struggle to execute long-term plans?
  What's the next little thing you can do today that will help you make even a slight progress towards your ultimate goal?

This month, I'm thrilled to announce Ariakit Plus.

Ariakit Plus is a subscription program that offers extra perks to those who engage with Ariakit in any way, be it through using the npm library, perusing the documentation, or simply drawing inspiration from the examples.

As the name suggests, it's an enhancement to the abundant free resources already provided by Ariakit.

I've spent several months designing this model and only implemented it when I, as a project user myself, was completely convinced that I would sign up as a customer.

What’s included

Access new examples

The Ariakit website currently showcases 48 examples that demonstrate a wide array of use cases for all Ariakit components. We'll continue expanding this collection with common and advanced use cases. Ariakit Plus will help us in doing this sustainably, providing added motivation to create top-notch recipes with comprehensive instructions.

Several of the upcoming examples, particularly the advanced ones, will be exclusive to Plus members. As I write this newsletter, we already have three Plus examples ready for your enjoyment:

• Navigation Menubar
  Using Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

• Combobox with integrated filter
  Filtering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.

• Warning on Dialog hide
  Preventing users from accidentally closing a modal Dialog component with unsaved changes by displaying a nested confirmation dialog.

If you're reading this newsletter at a later time, you can use the New tag to see all Plus examples.

With Ariakit Plus, you can access the source code of these examples and detailed documentation that allows you to dive deeper into their specifics:

• Discover why and how we made the menubar items tabbable.

• Understand how we used a single Menu popover element for multiple menu buttons to implement a plain CSS transition when changing between menus.

• Learn the process of displaying menus on hover and focus.

• Get insights on rendering the ComboboxItem component dynamically based on the search value.

• Find out how to prevent a Dialog from closing when there are unsaved changes.

• Learn to re-trigger the auto-focus behavior using the autoFocusOnShow prop.

And more

• Edit examples
  Edit examples in the browser using Vite and Next.js without having to install anything. Reproduce issues or quickly test something out using an existing example as a starting point.

• Preview API docs
  You can quickly preview detailed API documentation by hovering over site links. No more need to navigate away from the current page.

Do not worry

If you decide to cancel your subscription, it won't automatically renew, but you'll still have access until the end of the current billing period.

If you have any problems during this process, feel free to reach out to me at hazdiego@gmail.com

More Ariakit

• Dialog has now an API that's similar to the native HTML dialog element

• 50 bugs were reported and all of them had a workaround

• The blurOnHoverEnd prop

• Improved examples:

  Dialog with Menu

• Improved docs:

  Nested Dialog

• New releases:

  v0.3.4 → v0.3.7

More Dev

• Server Actions can return server and client components

• Safari is finally fixing combobox

This month, we're rolling out a new feature for Ariakit: Component providers.

Component providers are optional components that act as a higher-level API on top of component stores. They wrap Ariakit components and automatically provide a store to them.

You no longer need to manually create a store and pass it as a prop to the components. Instead, you can just wrap the components with a provider:

Component providers take the same props as component stores, allowing you to use them in the same manner with both controlled and uncontrolled APIs.

They also accept a store prop, enabling you to use component stores and component providers in tandem.

It's important to note that component stores aren’t going anywhere, and you do not need to migrate your code. They will continue to serve as a fundamental lower-level API.

In addition to the providers, we're also introducing context hooks such as useComboboxContext. This allows you to access the store from within components nested in providers and other top-level components like Combobox and ComboboxPopover.

You can learn more about the work and the rationale behind this feature in the Component providers RFC, authored by Dani Guardiola.

Built with Ariakit

• Nozzle (tweeted by Tanner Linsley)

• RSC Devtools (tweeted by Alvar Lagerlöf)

• Welcome UI (tweeted by Théo Mesnil)

If you've created something using Ariakit and want it featured in our next newsletter, just share your work on Twitter mentioning @ariakitjs, or reply to this email.

More Ariakit

• New example: Warning on Dialog hide
  Preventing users from accidentally closing a modal with unsaved changes by displaying a nested confirmation dialog.

• Improved examples:

  Submenu
  Animated Select
  Tab with React Router
  Tab with Next.js App Router
  Toolbar with Select

• Improved docs:

  Command

• New releases:

  v0.2.17 → v0.3.3

More Dev

• A better setTimeout

• addGlobalEventListener

Have you ever felt overwhelmed while working on a specific component or page in your web app, constantly switching between numerous documentation pages?

Ariakit might have several related pages that are scattered. For example, we have separate Component, Examples, and Reference pages for the Combobox module alone. Some examples aren't even included in the Combobox section as they're part of different components, such as Menu with Combobox or Select with Combobox. Finding exactly what you need can be a challenge.

To assist with this, Ariakit now features tag pages. If you're working with Combobox, you can access all related Combobox content from a single page: All things Combobox.

Working with Framer Motion? Discover all related content on the All things Framer Motion page.

Dealing with form controls? All things Form controls has you covered.

You'll find more tags at the top of each content page. If you notice any potentially useful ones missing, don't hesitate to suggest them by replying to this email or opening an issue.

Code block links

The Ariakit docs now include links to API reference pages within code blocks. If you're browsing the code examples on the site and want to explore a specific API further, simply click on the function, component, or property name to go to the API reference page.

RFC: Component providers

Ariakit has a new Request for Comments (RFC) for component providers. The proposal aims to simplify the use of component stores by abstracting them into higher-level provider components. This approach eliminates the need to explicitly instantiate component stores and pass them as props to components, without introducing any breaking changes.

If you believe this feature could assist in improving your code, we welcome your feedback on the RFC issue.

More Ariakit

• New guide: Coding guidelines

  TypeScript type vs. interface, forwardRef, displayName, and more

• New example: Menu with Tooltip

  With an abstracted API similar to the component providers RFC

• New example: Combobox filtering

  Using React.startTransition

• Improved examples:

  Combobox with links

  Multi-selectable Combobox

  Animated Combobox

  ComboboxCancel

  ComboboxDisclosure

  ComboboxGroup

• Improved docs:

  Getting started

  Button

  Checkbox

  Focusable

• New releases:

  v0.2.13 → v0.2.16

More Dev

• URL pagination: use links, not buttons

• Nice Tailwind <kbd> styles

  Here are the class names for copy and paste

I’m delighted to announce that the ariakit npm package is now stable (What is Ariakit?). If you’ve been eagerly awaiting the ideal opportunity to integrate Ariakit into your project, I can finally recommend it for production use. It’s already been successfully used by amazing projects such as WordPress, Todoist, Guide, Croct, and many others.

This means that Ariakit now follows semantic versioning and will introduce fewer breaking changes. Whenever feasible, these changes will be preceded by soft deprecations, followed by deprecation warnings before the actual breaking change occurs.

Ariakit is antifragile

Over the past year, numerous bugs have been reported, and all of them could be resolved in userland before a fix was implemented in the library. By inspecting the closed bugs in the repository, you will notice that each of them is labeled with “has workaround”.

This means that you don’t have to wait for a general solution to be proposed, discussed, implemented, tested, reviewed, merged, and published to npm in order to address your specific issue and move forward, delivering amazing features to your clients.

As both a maintainer and consumer of the project, I’m pleased that I can quickly fix any bug I encounter while using Ariakit in my apps without having to go through the entire process of figuring out a suitable solution. This not only saves time but also contributes to finding the proper fix.

When we address a bug report or feature request in the project, we create an example accessible in the browser and make sure it’s automatically tested on every commit to the library. This approach ensures that we don’t introduce any regressions in the future.

This isn’t an official announcement yet

The library is still being released as v0.x.x. This is because I intend to synchronize an official release with the launch of the ariakit.org website. Stay tuned!

More Ariakit

• ariakit.org now has searchable API docs

• New example: Radix UI Dialog

• New example: Dialog with a scrollable backdrop

• Updated example: MenuItemCheckbox

• Complex example: Menu and Select

• Updated guide: Composition

More Dev

• React effects, events, queueMicrotask, and requestAnimationFrame

• TypeScript tip: an alternative to filter(Boolean)

• New experimental accessibility feature on Chrome DevTools

This month we’ve introduced a new Composition guide to the Ariakit documentation. This guide offers detailed explanations on using the polymorphic as prop and introduces the new render prop, which aims to simplify the abstraction and extension of Ariakit components with an explicit API:

<TooltipAnchor
  title="Open menu"
  render={(props) => <MenuButton {...props} />}
>
  Menu
</TooltipAnchor>

By leveraging the render prop, you can create higher-level APIs that provide the same level of flexibility as any Ariakit component, all without having to handle the intricacies of TypeScript and the as prop.

For a practical demonstration of the render prop in action, I encourage you to explore the Tooltip with Framer Motion example. This example demonstrates how the render prop enables rendering the tooltip anchor as a link.

Thank you for your continued support, and happy exploring!

More Ariakit

• New example: Nested modal dialogs

• New example: Modal dialog with Next.js App Router

• New example: Tabs with Next.js App Router

• New example: Animated tooltip with Framer Motion

• New example: Checkbox with custom styles

• Updated example: Animated dropdown menu with Framer Motion

• Updated example: Tabs with React Router

• Simple Dialog/Menu higher-level API

• Using React Context with component stores

More Dev

• Vitest (alternative to Jest) supports importing CSS files

• Automated screen reader testing

I’m excited to share with you the latest updates on Ariakit.

As some of you may know, earlier this year, Revue was shut down. I migrated this newsletter to Substack. Please do let me know if you encounter any issues.

In recent months, I posted a Request for Comments (RFC) on the Ariakit repository, proposing to replace state hooks like useComboboxState with component stores:

import {
  useComboboxStore,
  Combobox,
  ComboboxPopover
} from "@ariakit/react"

function MyCombobox() {
  const combobox = useComboboxStore()
  return (
    <>
      <Combobox store={combobox} />
      <ComboboxPopover store={combobox}>
        ...
      </ComboboxPopover>
    </>
  )
}

This approach has numerous advantages over the old one, such as the ability to reuse state logic outside of React, prevent unnecessary re-renders, and better integration with React’s useEffect.

I’m thrilled to announce that this feature has finally landed. You can learn more about it on the RFC or the dedicated Component stores page on ariakit.org.

New package names

As part of this update, we’ve also changed the npm packages to include the @ariakit scope. You can expect to see new packages, such as @ariakit/dom and @ariakit/vue, in the future.

Furthermore, we’ve changed the versioning system from v2.0.0-beta.x to v0.x.x. This change ensures that projects that don’t set the exact version of the dependency on package.json won’t experience unnecessary breakages due to breaking changes released between beta versions.

More Ariakit

• Ariakit has a new logo ✨

• Test files on Ariakit are now framework-agnostic

• Test Ariakit examples on Next.js directly from the site

• Contribute to Ariakit directly from the browser using Gitpod

• Building a multi-level sliding menu with Ariakit and CSS Scroll Snap

• Ariakit has workaround

• Fixing bad UX with Ariakit Hovercard

• Use the browser’s built-in search to focus on ComboboxItem

• Improved support for links on Ariakit comboboxes

• The unconventional navigation on ariakit.org

• Improved support for auto-select and inline auto-completion on Combobox

• API ideas for a vanilla JS version of Ariakit

More Dev

• Detect DOM element direction (ltr/rtl)

• Performance: Map vs. plain objects

• Easy way to detect if the focus is leaving an element

• Using the hover media query to improve touch UX

• The problem with the autoFocus prop on React

• The best fuzzy-search library

• Using Unicode regular expressions to match any language

• Render diagrams on GitHub using markdown (my most popular tweet 😱)

• Render maps on GitHub using markdown

• Naming groups in regular expressions for better readability

• Always underline links within paragraphs (I wish I could do this on Substack)

• Why you should use interface instead of type to document APIs in TypeScript

Do you know what Combobox, Menu, Radio, Select, Tab, and Toolbar have in common? They all take advantage of the powerful Composite component.

Those components may render multiple elements. Ariakit is already optimized to render hundreds of composite items. But, for those who need an extra performance boost, we’ve been working on a virtualization feature.

Virtualization means that, even if your list has thousands of items, only the elements in the viewport will be rendered.

On Ariakit, we have to consider arrow keys and typeahead navigation. We still need access to items outside of the viewport to move focus to them when necessary. That’s why we’re building this feature into a new optional CompositeViewport component.

All components powered by Composite will immediately benefit from this feature.

More Ariakit

Testing with ariakit-test

Example of how the ariakit-test package is used internally to test Ariakit components.

Render props vs. asChild

Thoughts on render props vs. the asChild prop.

GitHub-like Textarea with Combobox

Using the Ariakit Combobox component to create a GitHub-like textarea widget.

Floating UI + Ariakit

We’ve recently migrated from Popper.js to Floating UI on Ariakit popovers.

Context Menu built with Ariakit

Context Menu component built with the Ariakit Menu.

Toolbar with Select

Toolbar component with a custom Select.

Dialog with <details><summary>

Progressively enhanced Dialog component rendered as <details><summary>, so it works before the JavaScript finishes loading.

Dialog with React Router

Using React Router to control the state of the Ariakit Dialog. This is how you’d use the Dialog component in a Remix app.

Menu, Dialog, Form, and CSS transitions

Example of multiple Ariakit components combined to create an animated UI.

More Dev

How to test accessibility

Thread on how you should test the accessibility of your site.

TypeScript string with autocomplete

A little trick to accept any string but still provide an autocomplete with specific values.

Using the built-in browser validation API

Example of how to use the built-in browser validation API with JavaScript. That’s the same technique used in the Ariakit Form component.

Scrollbars in dark mode

Make the browser show dark scrollbars when your site has a dark theme using the color-scheme CSS property.

Accessible links

Make links within paragraphs more accessible with the text-decoration-thickness CSS property.

queueMicrotask()

Thread about the handy queueMicrotask function available on all modern browsers.

This month I’d like to share one of the most requested components of Ariakit. We’ve been working on it for months, and now it’s finally available on the latest alpha version.

While I’ve been receiving feedback from people who are testing the alpha, I noticed quite a few using the Menu component as a custom select widget, which is problematic. This was happening so frequently that we made the decision to work on a specific Select component before the final release.

The new Select component is now available on v2.0.0-alpha.20.

Here’s a list of examples you can use as a reference:

• Default Select

• Select with a search field

• Select grid

• Select group

• Select with custom items

• Select with Form

• Multi-select

• Animated Select

Other stuff

Select wasn’t the only thing that’s happened since our previous newsletter. Here’s a list of updates you may find interesting:

• How is Ariakit different from library X?

• Annoying sub-menus and how to fix them

• Testing a multi-selectable combobox with a screen reader

• Hovercard component with keyboard support

• Replicating Twitter hovercard with keyboard support

• Building a simple dropdown menu with keyboard support

• Building a dropdown menu with a search field

• Experimenting with dropdown menus and tooltips

• Re-creating the macOS menu bar using Ariakit

• A higher-level API using Ariakit’s primitive components

What's next

Right now, composite components such as Menu, Combobox, and Select may render hundreds of items without performance issues. We’re now working on a built-in virtualization feature with proper keyboard support (which is hard to handle with the existing libraries), so they will be able to render thousands of items even on low-end devices.

Hopefully, we’ll talk more about that in the next newsletter.

See you!

This month I’d like to share one of the most critical components of Ariakit. It’s been tested since the very first versions of Reakit. And it will finally reach its stable form (!) in v2.

This is not the regular Form library you’re used to. Ariakit will manage focus and apply aria attributes automatically.

For example, submitting an invalid form will focus on the first invalid input. Adding or removing inputs in a dynamic field list will automatically handle focus.

Besides that, the Ariakit Form takes full advantage of the native browser validation with built-in i18n. You can use native HTML props like required, minLength, maxLength, min, max, type and pattern. Unlike the native element, though, you will be able to customize the error messages with CSS.

See you!

For the past few months, I’ve been working hard on the next major release of Reakit. This includes a more convenient API, better screen reader support, and several performance improvements.

Reakit has evolved. We’ve been focusing more and more on accessibility. In the future, we’d like to provide more framework-agnostic utilities as well.

Reakit stands for React Toolkit. Ariakit stands for Aria Toolkit, which is better aligned with these goals.

You can learn more about that change on What is Ariakit?

New docs

A new documentation site is under development. You’ll be able to interact with multiple examples for each component and play with the code directly in the browser.

Ariakit will remain an unstyled component library, but you’ll be able to see and play with the example CSS. You can use it as a reference to write your own.