@ariakitjs

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

ariakit.com
Joined July 2015
  • Tweets565
  • Following4
  • Followers2.6K
9Media
Ariakit has a new logo! ✨ Designed by @leoeelias
7
6
2
125
Ariakit retweeted
Igor bedesqui
@bedesqui20h
ariakit is THE BEST, there are many good ui libs out there, but, some used to have clunky dx, confusing docs, some get worst maintenance, some don't play nicely with other libraries, some don't give you all the control you'd want, etc... ariakit is consistently GOOD in all!!
Haz
@diegohaz23h
Ariakit tooltips
1
2
12
1,018
Ariakit retweeted
Haz
@diegohaz23h
Ariakit tooltips
2
1
1
47
3,365
Ariakit retweeted
Haz
@diegohazOct 25
Sneak peek of a text field recipe I'm building for Ariakit. ‣ Supports slots before and after the input, including interactive ones like a select button. ‣ Adapts to any background color while keeping its own colors accessible. ‣ Ready for AI agents. Coming soon.
5
1
1
65
3,035
Ariakit retweeted
Haz
@diegohazOct 21
Another navigation UI. Built this with CSS/React view transitions. I'd tried animating CSS anchor positioning before, and it kinda worked, but only with a lot of workarounds and edge cases. Also, the font-weight changes without a layout shift 👌
3
4
1
104
5,839
Ariakit retweeted
Haz
@diegohazOct 21
Progress navigation UI.
Dark-themed course progress card for “React for designers,” with a progress bar about 40% full; “Getting started” is complete (3 of 3 done), and the expanded “State and effects” chapter shows 1 of 4 done. In that chapter, “Adding state” (10 min) is checked, “Derived state” (9 min) is highlighted as the current lesson, “Synchronizing effects with external systems” (14 min) is incomplete, and “Chapter quiz” (5 min) is locked, followed by a collapsed “Working with data” chapter at 0 of 3 done.

ALT Dark-themed course progress card for “React for designers,” with a progress bar about 40% full; “Getting started” is complete (3 of 3 done), and the expanded “State and effects” chapter shows 1 of 4 done. In that chapter, “Adding state” (10 min) is checked, “Derived state” (9 min) is highlighted as the current lesson, “Synchronizing effects with external systems” (14 min) is incomplete, and “Chapter quiz” (5 min) is locked, followed by a collapsed “Working with data” chapter at 0 of 3 done.

1
2
36
1,327
Ariakit retweeted
Haz
@diegohazOct 20
Working on some new Ariakit navigation examples.
Dark-themed UI component gallery showing three navigation previews, each with Get code and open links: a Navigation sidebar with Home selected and Inbox (3 unread), Reports, Team, and Settings; a Brand Navigation sidebar with Projects highlighted in blue with a badge of 12 among Dashboard, Calendar, Documents, and Analytics; and a Top Bar for “Acme” with Overview, Projects, Deployments, Analytics, and Settings tabs, a notification bell, an MR avatar, and an Overview page with three placeholder cards.

ALT Dark-themed UI component gallery showing three navigation previews, each with Get code and open links: a Navigation sidebar with Home selected and Inbox (3 unread), Reports, Team, and Settings; a Brand Navigation sidebar with Projects highlighted in blue with a badge of 12 among Dashboard, Calendar, Documents, and Analytics; and a Top Bar for “Acme” with Overview, Projects, Deployments, Analytics, and Settings tabs, a notification bell, an MR avatar, and an Overview page with three placeholder cards.

1
14
863
Ariakit retweeted
Haz
@diegohazOct 17
I got inspired by this and asked both Opus 5.5 and Astra to record a song about Ariakit. Exact prompt: Can you write and record a song about Ariakit (reference: xitter.cf/cnakazawa/status/21107…)? Astra wrote the song but suggested a paid plugin to create the audio. I asked it to try to find a free option or just use code. It found a hosted solution, but because of its limits, it started downloading the open-source AI model to run it locally (!!!) Opus built everything with code and used the built-in macOS speech tools to record the vocals. It took 16 minutes and cost the equivalent of $2.90 at API rates. It also made a video (I didn't specifically ask for one, but it probably inferred that from the reference). The result isn't great, but it kind of reminds me of Portal (the game). Given how simple the prompt was and no external tool, I kinda liked it.
Christoph Nakazawa
@cnakazawaOct 15
We open sourced Void v1.1.11 and we made a music video for it. void.cloud
1
7
886
Ariakit retweeted
Haz
@diegohazAug 15
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. AI also seems to understand it particularly well. Having no breaking changes in the past 3 years, despite 37 new versions, might've helped keep the training data up to date. The one area where we're behind is the number of components. But that will change in the next few months. We've spent the past few months investing heavily in bug fixes and performance improvements. We're preparing v0.5, which will likely be the last release before v1 (finally). After that, we have tons of new components on the roadmap. Most of the APIs and use cases are already established, so it's just a matter of timing and tokens. If you haven't tried it yet, ask your agent to give it a try and let me know how it goes.
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.

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

2
1
36
4,104
Ariakit retweeted
Haz
@diegohazAug 7
In Ariakit, we have hundreds of duplicate component tests across happy-dom and Playwright. happy-dom tests run 6× faster, so humans and agents mostly use them during development for a quick feedback loop. Playwright tests are authoritative and run once at the end of each task. This setup has really sped up development for us. Highly recommend it.
1
1
11
1,173
Ariakit retweeted
Haz
@diegohazJul 28
We've made so many improvements to @ariakitjs 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. This comes on top of the improvements we've already made in recent versions. So if you haven't upgraded in a while, you can expect components to be up to 4× faster across the board.
1
1
11
1,063
Text blocks now have intent for text that needs to stand out more in the form... UI components built with @ariakitjs Icons from @huge_icons
3
8
1,464
.@ariakitjs DX 💯💯💯
1
2
212
Ariakit retweeted
Haz
@diegohazJul 21
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.

ALT Weekly Downloads metric showing 1,084,779 downloads, with a purple sparkline trending upward despite several dips.

2
2
40
1,575
one core requirement of this is building primitives that compose well together, here we have: ⋅ Select block ⋅ Image block ⋅ Nested blocks ⋅ Conditional blocks All working together nicely UI components built with @ariakitjs
2
4
1,032
experimenting with nested form fields in the builder powered by @ariakitjs
1
2
4
1,328
Recreated the "Buy MacBook Pro" flow to see how far I can push the blocks as always, UI components built with @ariakitjs
1
2
3
577
Working on a Prose block for writing arbitrary text. Supports conditional logic like other blocks. Built with @lexicaljs and @ariakitjs
3
23
2,430
Ariakit retweeted
Haz
@diegohazJul 12
We just removed .nvmrc from Ariakit and let pnpm manage Node.js too. If your project already uses pnpm, you may not need a separate Node version manager. Here’s the migration: 1. Pin Node for the project: `pnpm runtime set node 24` This adds devEngines.runtime to package.json. Then pnpm install resolves an exact Node version, records its checksum in pnpm-lock.yaml, and installs it locally. 2. Point GitHub Actions at the same configuration: - uses: actions/setup-node@v6 with: node-version-file: package.json 3. Remove .nvmrc and any `nvm use` instructions. The result: package.json becomes the single source of truth for both pnpm and Node, and contributors don’t need to switch Node manually.
Terminal output showing the successful execution of the pnpm i command in the ariakit repository, adding node version 24.18.0

ALT Terminal output showing the successful execution of the pnpm i command in the ariakit repository, adding node version 24.18.0

3
13
145
11,798
been monitoring the @ariakitjs Changelog and it seems we're so back!
1
3
228
Ariakit retweeted
zerts
@zertsdevMay 15
Designers: Let's not over-engineer this component and keep it simple. The component: The drop-down menu with combobox and tabs. Me: Okay, but then it should be accessible and animated. P.S. Thanks to @ariakitjs and @motiondotdev for the great API and examples! This is the way!
2
1
7
790
Load more