Reposted by Ben Rodri
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.
– 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.
June 19, 2025 at 6:21 PM
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.
– 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.
Reposted by Ben Rodri
Ariakit Styles will automatically adjust selection backgrounds and text colors to ensure sufficient contrast with surrounding elements.
Usage with Tailwind CSS:
<body class="selection:ak-layer-contrast-primary">
→ "primary" can be any token from your theme. In this case, it's a mid-tone blue.
Usage with Tailwind CSS:
<body class="selection:ak-layer-contrast-primary">
→ "primary" can be any token from your theme. In this case, it's a mid-tone blue.
February 20, 2025 at 1:15 AM
Ariakit Styles will automatically adjust selection backgrounds and text colors to ensure sufficient contrast with surrounding elements.
Usage with Tailwind CSS:
<body class="selection:ak-layer-contrast-primary">
→ "primary" can be any token from your theme. In this case, it's a mid-tone blue.
Usage with Tailwind CSS:
<body class="selection:ak-layer-contrast-primary">
→ "primary" can be any token from your theme. In this case, it's a mid-tone blue.
Reposted by Ben Rodri
Here's an example of ak-layer > ak-text. All texts in the same column use the same color (for example, all "yellow" elements use ak-text-[yellow]).
Ariakit automatically adjusts the color to ensure a minimum contrast ratio of 4.5:1 with the layer background.
No JS. Just CSS and color theory.
Ariakit automatically adjusts the color to ensure a minimum contrast ratio of 4.5:1 with the layer background.
No JS. Just CSS and color theory.
February 7, 2025 at 11:38 AM
Here's an example of ak-layer > ak-text. All texts in the same column use the same color (for example, all "yellow" elements use ak-text-[yellow]).
Ariakit automatically adjusts the color to ensure a minimum contrast ratio of 4.5:1 with the layer background.
No JS. Just CSS and color theory.
Ariakit automatically adjusts the color to ensure a minimum contrast ratio of 4.5:1 with the layer background.
No JS. Just CSS and color theory.
Yes, that’s the same limitation as when typing children elements.
January 14, 2025 at 7:58 PM
Yes, that’s the same limitation as when typing children elements.
Reposted by Ben Rodri
PRISMA Capacity had another round of open source sponsoring ❤️: www.prisma-capacity.eu/news/insight...
This time we made donations to @ariakit.org, @colinhacks.com's zod, @typescript-eslint.io, floating-ui.com and www.haecksen.org. Thank you all for your work.
This time we made donations to @ariakit.org, @colinhacks.com's zod, @typescript-eslint.io, floating-ui.com and www.haecksen.org. Thank you all for your work.
Backing Open-Source Innovation: The POSS Fund 2024 | PRISMA
PRISMA continues its support for the open-source community with the POSS Fund 2024.
www.prisma-capacity.eu
January 13, 2025 at 7:44 AM
PRISMA Capacity had another round of open source sponsoring ❤️: www.prisma-capacity.eu/news/insight...
This time we made donations to @ariakit.org, @colinhacks.com's zod, @typescript-eslint.io, floating-ui.com and www.haecksen.org. Thank you all for your work.
This time we made donations to @ariakit.org, @colinhacks.com's zod, @typescript-eslint.io, floating-ui.com and www.haecksen.org. Thank you all for your work.
Reposted by Ben Rodri
A nice new example from @ariakitjs: Command Menu with Tabs ❤️
It has it all — tabs, multi-column layout (grid), full keyboard navigation, solid API.
ariakit.org/examples/di...
It has it all — tabs, multi-column layout (grid), full keyboard navigation, solid API.
ariakit.org/examples/di...
January 10, 2025 at 10:19 AM
A nice new example from @ariakitjs: Command Menu with Tabs ❤️
It has it all — tabs, multi-column layout (grid), full keyboard navigation, solid API.
ariakit.org/examples/di...
It has it all — tabs, multi-column layout (grid), full keyboard navigation, solid API.
ariakit.org/examples/di...
Reposted by Ben Rodri
✨ New example: Command Menu with Tabs
A command palette built with Dialog, Combobox, and Tab components from Ariakit.
Demo: ariakit.org/examples/dia...
A command palette built with Dialog, Combobox, and Tab components from Ariakit.
Demo: ariakit.org/examples/dia...
January 9, 2025 at 2:13 PM
✨ New example: Command Menu with Tabs
A command palette built with Dialog, Combobox, and Tab components from Ariakit.
Demo: ariakit.org/examples/dia...
A command palette built with Dialog, Combobox, and Tab components from Ariakit.
Demo: ariakit.org/examples/dia...
Trying to explain @ariakit.org's `focusShift` option 🤔
January 9, 2025 at 4:14 AM
Trying to explain @ariakit.org's `focusShift` option 🤔
💯
Another benefit is that it provides out of the box interoperability with other libraries. For example, rendering React Aria's DatePicker within an Ariakit dialog just works™, even though React Aria renders the popover outside the dialog by default.
Another benefit is that it provides out of the box interoperability with other libraries. For example, rendering React Aria's DatePicker within an Ariakit dialog just works™, even though React Aria renders the popover outside the dialog by default.
December 28, 2024 at 10:07 PM
💯
Another benefit is that it provides out of the box interoperability with other libraries. For example, rendering React Aria's DatePicker within an Ariakit dialog just works™, even though React Aria renders the popover outside the dialog by default.
Another benefit is that it provides out of the box interoperability with other libraries. For example, rendering React Aria's DatePicker within an Ariakit dialog just works™, even though React Aria renders the popover outside the dialog by default.
This is true for mainstream libraries. We've benchmarked them all.
Even the native <dialog> element doesn't support this yet, as browser extensions don't use the top layer.
Even the native <dialog> element doesn't support this yet, as browser extensions don't use the top layer.
December 27, 2024 at 8:08 AM
This is true for mainstream libraries. We've benchmarked them all.
Even the native <dialog> element doesn't support this yet, as browser extensions don't use the top layer.
Even the native <dialog> element doesn't support this yet, as browser extensions don't use the top layer.
More context: ariakit.org/examples/dia...
December 27, 2024 at 8:01 AM
More context: ariakit.org/examples/dia...
The @ariakit.org dialog is the only one that lets you interact with browser extensions (like Google Translate, Grammarly, and password managers) within the dialog using either the mouse or the keyboard.
December 27, 2024 at 7:58 AM
The @ariakit.org dialog is the only one that lets you interact with browser extensions (like Google Translate, Grammarly, and password managers) within the dialog using either the mouse or the keyboard.
Reposted by Ben Rodri
Did you know you can use the built-in browser validation API with JavaScript to control the rendering of error messages?
Along with its simplicity, you also get internationalization for free ✨
Along with its simplicity, you also get internationalization for free ✨
![A snippet of code that uses the element.validity.valid and element.validationMessage properties.
Full code:
const [error, setError] = useState("")
function onBlur(event) {
if (event.target.validity.valid) {
setError("")
} else {
setError(event.target.validationMessage)
}
}
<div>
<input minLength={3} onBlur={onBlur} />
<div>{error}</div>
</div>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:eaimln3uk5ntgmykcbxrmsyp/bafkreidsvx64fbszmusi5tt4ghc2az75orod5aqt3zndrcvxqb2matcjn4@jpeg)
December 18, 2024 at 7:31 PM
Did you know you can use the built-in browser validation API with JavaScript to control the rendering of error messages?
Along with its simplicity, you also get internationalization for free ✨
Along with its simplicity, you also get internationalization for free ✨
Reposted by Ben Rodri
How to determine if it's a nav with tabbable links or ARIA tabs:
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
December 9, 2024 at 7:53 PM
How to determine if it's a nav with tabbable links or ARIA tabs:
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
Running Vitest tests directly in the browser is 💯
December 8, 2024 at 3:25 AM
Running Vitest tests directly in the browser is 💯
Reposted by Ben Rodri
Here's a neat trick to create drop shadows on containers with overflow elements like arrows.
Instead of using the CSS box-shadow property, try:
filter: drop-shadow(0 3px 3px gray);
developer.mozilla.org/en-US/docs/W...
Instead of using the CSS box-shadow property, try:
filter: drop-shadow(0 3px 3px gray);
developer.mozilla.org/en-US/docs/W...
December 4, 2024 at 9:27 PM
Here's a neat trick to create drop shadows on containers with overflow elements like arrows.
Instead of using the CSS box-shadow property, try:
filter: drop-shadow(0 3px 3px gray);
developer.mozilla.org/en-US/docs/W...
Instead of using the CSS box-shadow property, try:
filter: drop-shadow(0 3px 3px gray);
developer.mozilla.org/en-US/docs/W...
Reposted by Ben Rodri
We've been building the www.defined.net admin panel with @ariakit.org for the last several years, and really enjoy using it. It's flexible enough to style however we need it, composable enough to build complex components like a tag select-or-create combobox, and accessible to all our users.
Defined Networking
Nebula Overlay Networks: Extend network access with on-demand, encrypted tunnels between any hosts on any network. Defined Networking is the company behind the Nebula open-source project.
www.defined.net
November 26, 2024 at 5:35 PM
We've been building the www.defined.net admin panel with @ariakit.org for the last several years, and really enjoy using it. It's flexible enough to style however we need it, composable enough to build complex components like a tag select-or-create combobox, and accessible to all our users.
Reposted by Ben Rodri
New post on the @ariakit.org newsletter ✨
Performance, Tailwind v4, and more
Improved performance by 20-30% by working around useSyncExternalStore, new features, Black Friday discounts, and more.
newsletter.ariakit.org
November 26, 2024 at 4:28 PM
New post on the @ariakit.org newsletter ✨
Reposted by Ben Rodri
The next @ariakit.org newsletter goes out today.
We’ll discuss the recent performance improvements on the library with some comparison numbers. There’s also more information about an upcoming Tailwind v4 theme and Black Friday discounts.
We’ll discuss the recent performance improvements on the library with some comparison numbers. There’s also more information about an upcoming Tailwind v4 theme and Black Friday discounts.
Ariakit | Haz | Substack
Receive monthly updates about Ariakit directly in your inbox. Click to read Ariakit, by Haz, a Substack publication with thousands of subscribers.
newsletter.ariakit.org
November 26, 2024 at 11:12 AM
The next @ariakit.org newsletter goes out today.
We’ll discuss the recent performance improvements on the library with some comparison numbers. There’s also more information about an upcoming Tailwind v4 theme and Black Friday discounts.
We’ll discuss the recent performance improvements on the library with some comparison numbers. There’s also more information about an upcoming Tailwind v4 theme and Black Friday discounts.
Reposted by Ben Rodri
Noodling on another UI experiment with @ariakit.org, this time an animated menu inspired by YouTube's settings pane.
Feels so good to navigate without ever touching the mouse ⬅️➡️⬆️⬇️. The animations could definitely use some work!
Feels so good to navigate without ever touching the mouse ⬅️➡️⬆️⬇️. The animations could definitely use some work!
November 18, 2024 at 1:34 AM
Noodling on another UI experiment with @ariakit.org, this time an animated menu inspired by YouTube's settings pane.
Feels so good to navigate without ever touching the mouse ⬅️➡️⬆️⬇️. The animations could definitely use some work!
Feels so good to navigate without ever touching the mouse ⬅️➡️⬆️⬇️. The animations could definitely use some work!
Reposted by Ben Rodri
Ariakit v0.4.14 has been released with 20-30% faster composite widgets (like Combobox, Select, etc.).
Changelog: ariakit.org/changelog#0414
Changelog: ariakit.org/changelog#0414
November 16, 2024 at 2:12 PM
Ariakit v0.4.14 has been released with 20-30% faster composite widgets (like Combobox, Select, etc.).
Changelog: ariakit.org/changelog#0414
Changelog: ariakit.org/changelog#0414
Reposted by Ben Rodri
Hi Bluesky! Sorry for the repost, but the first thing I wanted to share with y'all is something I shared on Twitter yesterday
---
Building a Linear style filtering UI with @ariakit.org. Surprisingly simple to compose menus, selects, comboboxes, and popovers
---
Building a Linear style filtering UI with @ariakit.org. Surprisingly simple to compose menus, selects, comboboxes, and popovers
November 14, 2024 at 1:42 PM
Hi Bluesky! Sorry for the repost, but the first thing I wanted to share with y'all is something I shared on Twitter yesterday
---
Building a Linear style filtering UI with @ariakit.org. Surprisingly simple to compose menus, selects, comboboxes, and popovers
---
Building a Linear style filtering UI with @ariakit.org. Surprisingly simple to compose menus, selects, comboboxes, and popovers