Ariakit Plus
I'm excited to announce Ariakit Plus, a subscription program that provides additional benefits to anyone who interacts with Ariakit in any way.
Hello everyone,
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
Improved examples:
Improved docs:
New releases: