This border-radius transition 🤌🏽 Believe it or not, it's just CSS.

Concentric border radius

A drop shadow can make a big difference.

I’m experimenting with a high-level, styled Button component API. Yes or no?

TIL you can show different images for light and dark modes in GitHub README files using HTML or Markdown:

Delete buttons 🗑️ Do you prefer red for the background color or the text color?

UI buttons

CSS 🤝🏽 Math How to get even margins without ignoring line-height.

Checkbox cards ✅

Design better badges 🎨

Ariakit has hit 500k weekly downloads! Still a long way to go.

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