Tessera
Folgen

Ben Rodri

@ben.ariakit.org

Designer and developer @ariakit.org

10 Posts129 Follower22 Folgt
Haz@haz.dev · last yr.

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.

Haz@haz.dev · last yr.

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.

Haz@haz.dev · last yr.

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.

Screenshot showing six colored boxes with colored text inside.
Haz@haz.dev · 2y ago

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 ✨

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>A screenshot of a page shows an input filled with a single character and a styled error message stating, "Please lengthen this text to 3 characters or more (you are currently using 1 character)."
Haz@haz.dev · 2y ago

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.

Four links visually presented as a horizontal tab list
Ian VanSchooten@ianvs.dev · 2y ago

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.

defined.net

Haz@haz.dev · 2y ago

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.

Haz@haz.dev · 2y ago

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

JSX code: <RadixSelect.Root> <ComboboxProvider> <RadixSelect.Trigger /> <RadixSelect.Content> <Combobox /> <ComboboxList> <RadixSelect.Item asChild> <ComboboxItem /> </RadixSelect.Item> </ComboboxList> </RadixSelect.Content> </ComboboxProvider> </RadixSelect.Root>Screenshot of a custom select widget with a search input
Haz@haz.dev · 2y ago

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.