Animation, Ariakit Plus, and more
Improved CSS transition and animation support, Ariakit Plus with lifetime access, Combobox with Tabs, Command Menu, and more.
Hello everyone,
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.
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
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:
Improved docs:
New releases:
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?