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.
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 🤔
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
Hi folks! I've been working on a new Command Menu example for @ariakit.org. I'm excited to share more about it soon.
November 13, 2024 at 8:34 PM
Hi folks! I've been working on a new Command Menu example for @ariakit.org. I'm excited to share more about it soon.
Reposted by Ben Rodri
Why I believe Ariakit dot org will be around for decades:
→ We can have tested examples with any library: Radix, RAC, Headless UI, MUI, and more.
→ As the web platform evolves, we'll provide examples using only native widgets, teaching you how to implement and style them effectively.
→ We can have tested examples with any library: Radix, RAC, Headless UI, MUI, and more.
→ As the web platform evolves, we'll provide examples using only native widgets, teaching you how to implement and style them effectively.
November 13, 2024 at 11:51 AM
Why I believe Ariakit dot org will be around for decades:
→ We can have tested examples with any library: Radix, RAC, Headless UI, MUI, and more.
→ As the web platform evolves, we'll provide examples using only native widgets, teaching you how to implement and style them effectively.
→ We can have tested examples with any library: Radix, RAC, Headless UI, MUI, and more.
→ As the web platform evolves, we'll provide examples using only native widgets, teaching you how to implement and style them effectively.
Reposted by Ben Rodri
Ariakit Combobox supports inline autocompletion with a single `autoComplete` prop, using the same API as `aria-autocomplete`
Demo: ariakit.org/examples/com...
Demo: ariakit.org/examples/com...
November 11, 2024 at 7:12 AM
Ariakit Combobox supports inline autocompletion with a single `autoComplete` prop, using the same API as `aria-autocomplete`
Demo: ariakit.org/examples/com...
Demo: ariakit.org/examples/com...
Reposted by Ben Rodri
November 2, 2024 at 5:52 PM
Reposted by Ben Rodri
If you're using Radix UI and need a searchable Select, you can easily integrate the Ariakit Combobox components.
Ariakit is tree-shakable, so the bundle will include only the components you use.
Demo: ariakit.org/examples/com...
Ariakit is tree-shakable, so the bundle will include only the components you use.
Demo: ariakit.org/examples/com...
November 8, 2024 at 2:44 PM
If you're using Radix UI and need a searchable Select, you can easily integrate the Ariakit Combobox components.
Ariakit is tree-shakable, so the bundle will include only the components you use.
Demo: ariakit.org/examples/com...
Ariakit is tree-shakable, so the bundle will include only the components you use.
Demo: ariakit.org/examples/com...
Reposted by Ben Rodri
It feels like everyone here is united by a shared determination to make this platform succeed.
After all, this is probably our best opportunity to escape captivity.
After all, this is probably our best opportunity to escape captivity.
November 8, 2024 at 12:11 PM
It feels like everyone here is united by a shared determination to make this platform succeed.
After all, this is probably our best opportunity to escape captivity.
After all, this is probably our best opportunity to escape captivity.