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