Thank you thanks.dev for sponsoring Ariakit 😊

The new @ariakit.org app will include styled examples with copy-paste code, AI prompts, and shadcn commands for both Ariakit React and React Aria. You should be free to choose the underlying component library for your app.

A sneak peek at the upcoming Ariakit examples

Tooltips are an accessibility nightmare, but if you want to make them as accessible as possible, make sure users can move the cursor over them. Some magnifier tools use the cursor position. If the tooltip closes when the cursor moves away from the anchor, it will not work.

Nested disclosure widgets

Collapsible sidebar built with @ariakit.org

1, 2, or 3?

Sidebar with animated, collapsible groups styled with @⁠ariakit⁠/⁠tailwind Automatic light/dark modes.⁠

Checkbox cards built with @ariakit.org

Code examples with embedded API docs

Built with @ariakit.org

Preview/code blocks

Segmented control built with @⁠ariakit⁠/⁠tailwind

Collapsible payment method card styled with Ariakit Tailwind.

Nested animated collapsible panels built with Ariakit

Built with @⁠ariakit/tailwind Automatic dark/light modes and contrast.

My talk at WeAreDevs World Congress on building interactive, asynchronous UI with React 19 and @ariakit.org is now available! Watch it here: www.wearedevelopers.com/en/videos/15...

Built with @ariakit.org Tailwind

Built an example using React Aria and Ariakit Styles 🤝🏽 Coming soon to the Ariakit site.

The next version of the Ariakit site will include native HTML examples with Tailwind styles. Super excited about this.

Ariakit Disclosure component animated with pure CSS.

Collapsible list items built with native HTML (ol > li > details > summary) and Ariakit Tailwind.

We're working on an improved version of @ariakit.org, and I've never seen anything this good. – Superb UX – 200+ new copy/paste examples – Tailwind plugin for easy and accessible styling – shadcn commands Can't wait to release this.

Working on custom styles for checkbox cards

Ariakit has a banner (finally)

Successful talk at @wearedevelopers.bsky.social this week. It was great to demo to more developers what @ariakit.org can do 🔥

always bet on ariakit

This is why I believe Ariakit dot org will stay relevant for decades: – It's always been about examples. And we'll feature multiple libraries: Ariakit React, Radix, Base UI, RAC, Headless UI, and others outside the React ecosystem.

🎤 Learn about building async-ready UIs the React 19 way. @aurorascharff.no shows how React Server Components, new mutation tools, and Ariakit combine to create accessible, streamlined, low-boilerplate UIs. 🗓️ Nov 28 & Dec 1, #ReactAdvanced

It works really well.

You might want to take a look at the Composite primitive in Ariakit. It's specifically designed to be a low-level primitive to create any sort of composite widget, like listboxes and grids. ariakit.org/components/c...

in @ariakit.org the plan is to transition to native browser APIs as they become more stable and available, with polyfilling options and such. it's very cool because it means Ariakit is meant to shrink overtime in size.

I want to offer Popover components in Ariakit that don't rely on Floating UI, allowing users to customize them with CSS anchor positioning (using a polyfill for browsers that lack support).

Working on new Combobox examples for Ariakit 🧑🏽‍💻

It's another beautiful day with useOptimistic() and use(), featuring @ariakit.org, which I tried for the first time and instantly fell in love with ☺️ Maybe this example needs a blog post?

I'm working on a shadcn registry for the upcoming version of Ariakit.org I'm still not sure if it will support everything I need, but it looks promising.

I just realized that Ariakit Styles is fantastic for code highlighting. You can use any background you want, and it ensures that the text colors maintain enough contrast. Just CSS.

In case you missed it, Ariakit now has a new Discord channel. We're discussing Ariakit Solid and Ariakit Styles there. Join us at chat.ariakit.org

If you're interested in trying Ariakit Styles, just DM me or join our Discord: discord.gg/WyHvnXsvMs

there's a new kid on the block... introducing the brand new... 🚀 Ariakit official Discord server! ➡️ join now: discord.gg/WyHvnXsvMs ⬅️

Ariakit React has reached 1 million downloads a month 🥳

Ariakit Styles will automatically adjust selection backgrounds and text colors to ensure sufficient contrast with surrounding elements. Usage with Tailwind CSS: <body class="selection:ak-layer-contrast-primary"> → "primary" can be any token from your theme. In this case, it's a mid-tone blue.

Welcome @dio.la to the Ariakit core team 🥳

Ariakit Solid 0.2 is coming soon, with tons of improvements and 4-5 new primitives including Focusable, Command, Button and Checkbox (maybe Portal too). still quite early but the progress is real, stay tuned!

coding stream tomorrow (open source / Ariakit Solid) 5:30pm CET (4:30pm UTC) -> twitch.tv/daniguardio_la <-

i'm live on twitch! open sourcing! my first stream ever - working on the official @solidjs.com port of @ariakit.org come say hi! :) -> www.twitch.tv/daniguardio_la <-

Exploring automatic rounded corners in Ariakit Styles. Nested elements inherit their parent's border radius when they're close to the edges. Once detached, they can apply their own border radius. This solution relies solely on CSS. What do you think?

For reference, here's what Ariakit Styles would have done to this UI. I chose the same colors, same blue. Ariakit adjusts it to maintain contrast no matter which background is selected (which you could let users customize it to their preference).

Here's an example of ak-layer > ak-text. All texts in the same column use the same color (for example, all "yellow" elements use ak-text-[yellow]). Ariakit automatically adjusts the color to ensure a minimum contrast ratio of 4.5:1 with the layer background. No JS. Just CSS and color theory.

I wrote about Ariakit Themes: gist.github.com/diegohaz/aef... Let me know your thoughts.