8 months later, finally migrated to the .com 🎉

(we're still working on the new version)

A technical diagram comparing three ways to style element corners using CSS variables `--r: 12px` and `--gap: 4px`. 1. "Border Radius": Standard support across all major browsers using `border-radius: var(--r)`. 2. "Corner Shape": Uses `corner-start-end-shape: scoop` and `border-start-end-radius` calculation, shown with Chrome and Edge icons. 3. "Border Shape": Uses a complex custom `border-shape` definition (likely CSS Houdini/Paint API) with extensive geometry calculations for shoulders and arcs, indicated with a Chrome Canary icon.

Modern CSS capabilities.

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

Infographic explaining concentric border radius formula: inner radius = parent radius - padding

Concentric border radius

A visual comparison of two segmented toggle switches with "Profile" selected. The top version uses a flat white pill for the active state with no shadow, blending smoothly with the track. The bottom version adds a visible drop shadow to the white pill, giving it a lifted, floating appearance.

A drop shadow can make a big difference.

Diagram illustrating component composition for various button styles. 1. Top Center: A simple "Button" rendered with `<Button>Button</Button>`. 2. Top Left: A square button with a plus icon, using `<ButtonIcon>` and screen-reader text. 3. Top Right: A white pill button "+ Follow back" using props `$bg="invert" $radius="round" $px="xl"`. 4. Center Left: A badge-style button "Technology 43" with a computer icon and a count span. 5. Bottom Left: A "Following" button with a checkmark icon using `$radius="round"`. 6. Bottom Right: A large profile button for "Haz @diegohaz" demonstrating complex layout with `$orientation="vertical"`, `$rowSpan`, and nested content (image, label, description, icons).

I’m experimenting with a high-level, styled Button component API.

Yes or no?

Instructional diagram about adaptive images on GitHub. - Method 1 (HTML): A code snippet using `<picture>` with `<source media="(prefers-color-scheme: light)" ...>` and a corresponding dark version. - Method 2 (Markdown): Code snippet showing `` and ``. - Visual Output: Arrows point from the code to two versions of the "ariakit" logo—one optimized for a dark background (white text) and one for a light background (black text).

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

A 2x2 grid showcasing different designs for a "Delete" button. The top left shows a dark-mode ghost style with orange text. The top right is a light-mode outlined style with dark red text. The bottom left features a solid bright red button, while the bottom right shows a solid dark maroon button.

Delete buttons 🗑️

Do you prefer red for the background color or the text color?

Collection of various UI button styles including primary, secondary, icon, and dropdown variants

UI buttons

Infographic titled "CSS 🤝 Math" demonstrating algorithmic design. - Top: A rendered "Technology" button with a white checkmark icon. - Bottom: An annotated version of the same button showing the underlying CSS logic. - `--py: 0.875em` (vertical padding) is the single source of truth. - `--px` (horizontal padding) is derived via: `calc(var(--py) + (1lh - 1cap)/2)`, where `1lh` is line-height and `1cap` is cap-height. - The icon's size is set to `1lh`. - The icon's right margin is adjusted with: `calc(var(--py) - var(--px))` to visually center the icon relative to the text and padding.

CSS 🤝🏽 Math

How to get even margins without ignoring line-height.

A UI kit display showing different states of a "Programming" choice chip. It includes unselected states with empty circular checkboxes, selected states with blue checkmarks and borders, variants with icons on the right, and different layout alignments (checkbox on left vs right).

A UI mockup showing three variations of a selection card labeled "Programming." Each card contains a checkbox, a title, a description, and a small icon. The top card is unselected (dark grey). The middle card is selected (highlighted in blue with a checked box). The bottom card is disabled (content appears dimmed or faded).

Checkbox cards ✅

A step-by-step visual guide on styling a UI badge. It starts with a solid green "Success" badge, transitions to a blended dark background, highlights the text in green, adds a checkmark icon, and finally repositions the icon using "negative margin-inline-start" for better alignment.

Design better badges 🎨

Weekly downloads chart showing 505,108 with an upward trend

Ariakit has hit 500k weekly downloads!

Still a long way to go.

Screenshot of a GitHub Sponsors message with the Octocat logo and the headline “You have a new sponsor!” The line below says “@thnxdev is now sponsoring @ariakit for $219.00 one time!”

Thank you thanks.dev for sponsoring Ariakit 😊

Dark‑mode split view of two documentation pages. Left: “Disclosure” for Ariakit React; right: “Disclosure (React Aria).” Each page has an intro sentence about using the Disclosure component to build collapsible content, a pill tag (“Ariakit React” or “React Aria”), and a “Basic Example” card showing an expanded disclosure titled “How do I get started?” with two paragraphs. Small action icons (preview eye, code, external) sit above the example on both sides.

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

A triptych of a documentation navigation sidebar for “Acme Corp,” each panel using a light gray surface with a blue triangular logo at the top. The “Getting Started” section (rocket icon with a down caret) is open, revealing four items: Introduction, Installation (displayed as the current page with a white rounded pill and subtle shadow), Quickstart, and Editor Setup. Lower in the list are two collapsed groups—“Guides” (document icon) and “Resources” (stacked‑layers icon)—each with a right‑pointing chevron. The three columns illustrate subtle style variations (e.g., faint vertical guide line and spacing), but the structure and the Installation selection remain the same across all three.

1, 2, or 3?

Sidebar with animated, collapsible groups styled with @⁠ariakit⁠/⁠tailwind

Automatic light/dark modes.⁠

Register form with name, email, and interest chips; Finance and Health selected

Interest chip selector in dark mode with “Finance” selected

Dark‑mode “Select your interests” screen showing four cards: Technology, Culture, Health, and Finance. Culture is selected (blue check and blue outline). Technology appears dimmed with a grey check icon, while Health and Finance are unselected with empty circles.

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

Screenshot of billing settings showing a masked Visa ending 3421 and recent $20 subscription charges

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.

Aurora Scharff - Building Interactive Async UI with React 19 and Ariakit This was on 10/07/2025 on Stage 5 Handling async operations in UI components can be tricky—pending states, inefficient updates, and accessibility challenges often arise. This session will explore how ...

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...