Toolkit with accessible components, styles, and examples for your next web app
Joined July 2015
- Tweets559
- Following4
- Followers2.6K
- Likes834
Ariakit retweeted
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.
Ariakit retweeted
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.
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.
Ariakit retweeted
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.
Ariakit retweeted
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.
Ariakit retweeted
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
Ariakit retweeted
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
Ariakit retweeted
experimenting with nested form fields in the builder
powered by @ariakitjs
Ariakit retweeted
Recreated the "Buy MacBook Pro" flow to see how far I can push the blocks
as always, UI components built with @ariakitjs
Ariakit retweeted
Working on a Prose block for writing arbitrary text. Supports conditional logic like other blocks.
Built with @lexicaljs and @ariakitjs
Ariakit retweeted
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.
ALT Terminal output showing the successful execution of the pnpm i command in the ariakit repository, adding node version 24.18.0
Ariakit retweeted
been monitoring the @ariakitjs Changelog and it seems we're so back!
Ariakit retweeted
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!
Ariakit retweeted
The biggest update ever for @zerion's web app is here!
Powered by @tan_stack, @ariakitjs, and @motiondotdev.
Completely revamped from scratch, filled with small improvements, new features, and enhanced workflows.
Ariakit retweeted
8 months later, finally migrated to the .com 🎉
(we're still working on the new version)
I picked up the .com in a domain auction (the previous owner let it expire) 😀
Should I redirect it to .org or make .com the main?
ALT A notification showing a winning bid for the "ariakit.com" domain. The text reads, "Congratulations! Your bid won," with a winning bid of $305 USD and a yearly renewal cost of $21.99 USD.
Ariakit retweeted
Instead of hard-coding every color for each theme, you can let users pick any color they want.
Tailwind plugin coming soon (it’s actually already published, but still experimental).
Powered by CSS relative color syntax.
Ariakit retweeted
Modern CSS capabilities.
ALT 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.