Discover more from Ariakit
Do you know what
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
All components powered by Composite will immediately benefit from this feature.
Example of how the
ariakit-test package is used internally to test Ariakit components.
Thoughts on render props vs. the
Using the Ariakit Combobox component to create a GitHub-like textarea widget.
We’ve recently migrated from Popper.js to Floating UI on Ariakit popovers.
Context Menu component built with the Ariakit Menu.
Toolbar component with a custom Select.
Progressively enhanced Dialog component rendered as
Using React Router to control the state of the Ariakit Dialog. This is how you’d use the Dialog component in a Remix app.
Example of multiple Ariakit components combined to create an animated UI.
Thread on how you should test the accessibility of your site.
A little trick to accept any string but still provide an autocomplete with specific values.
Make the browser show dark scrollbars when your site has a dark theme using the
color-scheme CSS property.
Make links within paragraphs more accessible with the
text-decoration-thickness CSS property.
Thread about the handy
queueMicrotask function available on all modern browsers.