Sign in

Ariakit

@ariakit.com
414 followers 3 following 2 posts

Toolkit with accessible components, styles, and examples for your next web app ariakit.com

PostsRepliesMedia
Reposted by Ariakit
Haz @haz.dev · 15/08/2026
The more I use other component libraries, the more convinced I am that Ariakit Components are necessary. We get so many details right, and the flexibility is unmatched.
Package statistics panel showing 1,157,131 weekly downloads with a rising purple trend chart, verified version 0.4.37, MIT license, last published 6 days ago, and four collaborator avatars.
131
Reposted by Ariakit
Haz @haz.dev · 28/07/2026
We've made so many improvements to @ariakit.com components over the past 3 months. I'm especially excited about the performance gains. In the next version, the new ComboboxSelect component will be twice as fast as the current Combobox + Select combination used to build selects with search fields.
191
Reposted by Ariakit
Haz @haz.dev · 21/07/2026
Ariakit React just hit 1M weekly downloads on npm 🎉 We're just getting started. Launching something big in September/October.
Weekly Downloads metric showing 1,084,779 downloads, with a purple sparkline trending upward despite several dips.
042
Reposted by Ariakit
Haz @haz.dev · 23/03/2026
8 months later, finally migrated to the .com 🎉 (we're still working on the new version)
041
Reposted by Ariakit
Haz @haz.dev · 06/02/2026
Modern CSS capabilities.
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.
2635
Reposted by Ariakit
Haz @haz.dev · 03/02/2026
This border-radius transition 🤌🏽 Believe it or not, it's just CSS.
921818
Reposted by Ariakit
Haz @haz.dev · 02/02/2026
Concentric border radius
Infographic explaining concentric border radius formula: inner radius = parent radius - padding
1786
Reposted by Ariakit
Haz @haz.dev · 01/02/2026
A drop shadow can make a big difference.
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.
0812
Reposted by Ariakit
Haz @haz.dev · 20/01/2026
I’m experimenting with a high-level, styled Button component API. Yes or no?
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).
1141
Reposted by Ariakit
Haz @haz.dev · 19/01/2026
TIL you can show different images for light and dark modes in GitHub README files using HTML or Markdown:
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 `![Logo](...#gh-dark-mode-only)` and `![Logo](...#gh-light-mode-only)`.
- 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).
0253
Reposted by Ariakit
Haz @haz.dev · 18/01/2026
Delete buttons 🗑️ Do you prefer red for the background color or the text color?
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.
991
Reposted by Ariakit
Haz @haz.dev · 17/01/2026
UI buttons
Collection of various UI button styles including primary, secondary, icon, and dropdown variants
0121
Reposted by Ariakit
Haz @haz.dev · 16/01/2026
CSS 🤝🏽 Math How to get even margins without ignoring line-height.
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.
0281
Reposted by Ariakit
Haz @haz.dev · 15/01/2026
Checkbox cards ✅
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).
0171
Reposted by Ariakit
Haz @haz.dev · 14/01/2026
Design better badges 🎨
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.
0343
Reposted by Ariakit
Haz @haz.dev · 17/12/2025
Ariakit has hit 500k weekly downloads! Still a long way to go.
Weekly downloads chart showing 505,108 with an upward trend
0121
Reposted by Ariakit
Haz @haz.dev · 12/11/2025
Thank you thanks.dev for sponsoring Ariakit 😊
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!”
261
Reposted by Ariakit
Haz @haz.dev · 05/10/2025
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.
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.
1202
Reposted by Ariakit
Haz @haz.dev · 03/10/2025
A sneak peek at the upcoming Ariakit examples
0121
Reposted by Ariakit
Haz @haz.dev · 03/10/2025
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.
0132
Reposted by Ariakit
Haz @haz.dev · 02/10/2025
Nested disclosure widgets
061
Reposted by Ariakit
Haz @haz.dev · 30/09/2025
Collapsible sidebar built with @ariakit.org
082
Reposted by Ariakit
Haz @haz.dev · 27/09/2025
1, 2, or 3?
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.
721
Reposted by Ariakit
Haz @haz.dev · 25/09/2025
Sidebar with animated, collapsible groups styled with @⁠ariakit⁠/⁠tailwind Automatic light/dark modes.⁠
171
Reposted by Ariakit
Haz @haz.dev · 24/09/2025
Checkbox cards built with @ariakit.org
Register form with name, email, and interest chips; Finance and Health selectedInterest chip selector in dark mode with “Finance” selectedDark‑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.
0101
Reposted by Ariakit
Haz @haz.dev · 23/09/2025
Code examples with embedded API docs
091
Reposted by Ariakit
Haz @haz.dev · 22/09/2025
Built with @ariakit.org
0101
Reposted by Ariakit
Haz @haz.dev · 21/09/2025
Preview/code blocks
081
Reposted by Ariakit
Haz @haz.dev · 20/09/2025
Segmented control built with @⁠ariakit⁠/⁠tailwind
1112
Reposted by Ariakit
Haz @haz.dev · 15/09/2025
Collapsible payment method card styled with Ariakit Tailwind.
Screenshot of billing settings showing a masked Visa ending 3421 and recent $20 subscription charges
081
Reposted by Ariakit
Haz @haz.dev · 12/09/2025
Nested animated collapsible panels built with Ariakit
0101
Reposted by Ariakit
Haz @haz.dev · 10/09/2025
Built with @⁠ariakit/tailwind Automatic dark/light modes and contrast.
2181
Reposted by Ariakit
Aurora Scharff @aurorascharff.no · 25/08/2025
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...
wearedevelopers.com
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 ...
173
Reposted by Ariakit
Haz @haz.dev · 23/08/2025
Built with @ariakit.org Tailwind
1141
Reposted by Ariakit
Haz @haz.dev · 18/08/2025
Built an example using React Aria and Ariakit Styles 🤝🏽 Coming soon to the Ariakit site.
021
Reposted by Ariakit
Haz @haz.dev · 17/08/2025
The next version of the Ariakit site will include native HTML examples with Tailwind styles. Super excited about this.
Split-view code playground with HTML details/summary accordion and a rendered disclosure card preview
0223
Reposted by Ariakit
Haz @haz.dev · 10/08/2025
Ariakit Disclosure component animated with pure CSS.
091
Reposted by Ariakit
Haz @haz.dev · 06/08/2025
Collapsible list items built with native HTML (ol > li > details > summary) and Ariakit Tailwind.
1234
Reposted by Ariakit
Haz @haz.dev · 02/08/2025
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.
2393
Reposted by Ariakit
Haz @haz.dev · 29/07/2025
Working on custom styles for checkbox cards
A composite image displaying different UI patterns for selecting interests on a dark background. The variations include large graphical cards, smaller tag-like buttons within a registration form, and detailed rectangular cards with descriptions.
0192
Reposted by Ariakit
Haz @haz.dev · 19/07/2025
Ariakit has a banner (finally)
The Ariakit logo against a dark background of UI components, with text labels that say "Install components," "Pick styles," and "Copy & paste examples."
1182
Reposted by Ariakit
Aurora Scharff @aurorascharff.no · 12/07/2025
Successful talk at @wearedevelopers.bsky.social this week. It was great to demo to more developers what @ariakit.org can do 🔥
092
Reposted by Ariakit
Dani Guardiola @dio.la · 19/06/2025
always bet on ariakit
051
Reposted by Ariakit
Haz @haz.dev · 19/06/2025
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.
1144
Reposted by Ariakit
React Advanced London @reactadvanced.gitnation.org · 09/06/2025
🎤 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
reactadvanced.com
Learn more!
reactadvanced.com
032
Reposted by Ariakit
Haz @haz.dev · 26/05/2025
It works really well.
Docs management interface with "Ariakit" document indexed
041
Reposted by Ariakit
Haz @haz.dev · 25/05/2025
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...
061
Reposted by Ariakit
Dani Guardiola @dio.la · 15/05/2025
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.
141
Reposted by Ariakit
Haz @haz.dev · 01/04/2025
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).
362
Reposted by Ariakit
Haz @haz.dev · 01/04/2025
Working on new Combobox examples for Ariakit 🧑🏽‍💻
Screenshot of combobox with groups in dark modeScreenshot of combobox with groups in light mode
1122