Ariakit
LightNews LightNews
banner
ariakit.org
Ariakit
@ariakit.org
410 followers 3 following 2 posts
Toolkit with accessible components, styles, and examples for your next web app
https://ariakit.org
Posts Replies Media Videos
Pinned
ariakit.org
Ariakit @ariakit.org · Nov 2
Building something with @ariakit.org?

Share it here on 🦋 Bluesky mentioning us and we will repost.
Reposted by Ariakit
haz.dev
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).
January 15, 2026 at 4:36 PM
Reposted by Ariakit
haz.dev
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.
January 14, 2026 at 1:42 PM
Reposted by Ariakit
haz.dev
Ariakit has hit 500k weekly downloads!

Still a long way to go.
Weekly downloads chart showing 505,108 with an upward trend
December 17, 2025 at 7:58 AM
Reposted by Ariakit
haz.dev
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!”
November 12, 2025 at 3:54 PM
Reposted by Ariakit
haz.dev
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.
October 5, 2025 at 12:53 PM
Reposted by Ariakit
haz.dev
A sneak peek at the upcoming Ariakit examples
October 3, 2025 at 5:45 PM
Reposted by Ariakit
haz.dev
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.
October 3, 2025 at 2:12 PM
Reposted by Ariakit
haz.dev
Nested disclosure widgets
October 2, 2025 at 3:04 PM
Reposted by Ariakit
haz.dev
Collapsible sidebar built with @ariakit.org
September 30, 2025 at 2:41 PM
Reposted by Ariakit
haz.dev
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.
September 27, 2025 at 1:45 AM
Reposted by Ariakit
haz.dev
Sidebar with animated, collapsible groups styled with @⁠ariakit⁠/⁠tailwind

Automatic light/dark modes.⁠
September 24, 2025 at 11:41 PM
Reposted by Ariakit
haz.dev
Checkbox cards built with @ariakit.org
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.
September 24, 2025 at 7:46 PM
Reposted by Ariakit
haz.dev
Code examples with embedded API docs
September 23, 2025 at 9:02 PM
Reposted by Ariakit
haz.dev
Built with @ariakit.org
September 22, 2025 at 5:14 PM
Reposted by Ariakit
haz.dev
Preview/code blocks
September 21, 2025 at 1:35 PM
Reposted by Ariakit
haz.dev
Segmented control built with @⁠ariakit⁠/⁠tailwind
September 20, 2025 at 5:01 PM
Reposted by Ariakit
haz.dev
Collapsible payment method card styled with Ariakit Tailwind.
Screenshot of billing settings showing a masked Visa ending 3421 and recent $20 subscription charges
September 15, 2025 at 6:42 AM
Reposted by Ariakit
haz.dev
Nested animated collapsible panels built with Ariakit
September 12, 2025 at 10:23 PM
Reposted by Ariakit
haz.dev
Built with @⁠ariakit/tailwind

Automatic dark/light modes and contrast.
September 10, 2025 at 9:54 PM
Reposted by Ariakit
aurorascharff.no
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...
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 ...
www.wearedevelopers.com
August 25, 2025 at 2:34 PM
Reposted by Ariakit
haz.dev
Built with @ariakit.org Tailwind
August 23, 2025 at 7:07 AM
Reposted by Ariakit
haz.dev
Built an example using React Aria and Ariakit Styles 🤝🏽

Coming soon to the Ariakit site.
August 18, 2025 at 6:27 PM
Reposted by Ariakit
haz.dev
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
August 17, 2025 at 4:07 PM
Reposted by Ariakit
haz.dev
Ariakit Disclosure component animated with pure CSS.
August 10, 2025 at 10:53 AM
Reposted by Ariakit
haz.dev
Collapsible list items built with native HTML (ol > li > details > summary) and Ariakit Tailwind.
August 6, 2025 at 9:21 AM