Tessera

Folgen

Ariakit

@ariakit.com

Toolkit with accessible components, styles, and examples for your next web app https://ariakit.com

2 Posts416 Follower 3 Folgt

Haz @haz.dev · last wk.

We've made so many improvements to @ariakit.com 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.

Haz @haz.dev · 2w ago

Ariakit React just hit 1M weekly downloads on npm 🎉 We're just getting started. Launching something big in September/October.

Weekly Downloads metric showing 1,084,779 downloads, with a purple sparkline trending upward despite several dips.

Haz @haz.dev · 5mo ago

8 months later, finally migrated to the .com 🎉 (we're still working on the new version)

Haz@haz.dev · last yr.

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?

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.

Haz @haz.dev · 6mo ago

Modern CSS capabilities.

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.

Haz @haz.dev · 6mo ago

This border-radius transition 🤌🏽 Believe it or not, it's just CSS.

Haz @haz.dev · 6mo ago

Concentric border radius

Haz @haz.dev · 6mo ago

A drop shadow can make a big difference.

Haz @haz.dev · 7mo ago

I’m experimenting with a high-level, styled Button component API. Yes or no?

Haz @haz.dev · 7mo ago

TIL you can show different images for light and dark modes in GitHub README files using HTML or Markdown:

Haz @haz.dev · 7mo ago

Delete buttons 🗑️ Do you prefer red for the background color or the text color?

A 2x2 grid showcasing different designs for a "Delete" button. The top left shows a dark-mode ghost style with orange text. The top right is a light-mode outlined style with dark red text. The bottom left features a solid bright red button, while the bottom right shows a solid dark maroon button.

Haz @haz.dev · 7mo ago

UI buttons

Haz @haz.dev · 7mo ago

CSS 🤝🏽 Math How to get even margins without ignoring line-height.

Infographic titled "CSS 🤝 Math" demonstrating algorithmic design.
- Top: A rendered "Technology" button with a white checkmark icon.
- Bottom: An annotated version of the same button showing the underlying CSS logic.
- `--py: 0.875em` (vertical padding) is the single source of truth.
- `--px` (horizontal padding) is derived via: `calc(var(--py) + (1lh - 1cap)/2)`, where `1lh` is line-height and `1cap` is cap-height.
- The icon's size is set to `1lh`.
- The icon's right margin is adjusted with: `calc(var(--py) - var(--px))` to visually center the icon relative to the text and padding.

Haz @haz.dev · 7mo ago

Checkbox cards ✅

A UI kit display showing different states of a "Programming" choice chip. It includes unselected states with empty circular checkboxes, selected states with blue checkmarks and borders, variants with icons on the right, and different layout alignments (checkbox on left vs right).

A UI mockup showing three variations of a selection card labeled "Programming." Each card contains a checkbox, a title, a description, and a small icon. The top card is unselected (dark grey). The middle card is selected (highlighted in blue with a checked box). The bottom card is disabled (content appears dimmed or faded).

Haz @haz.dev · 7mo ago

Design better badges 🎨

A step-by-step visual guide on styling a UI badge. It starts with a solid green "Success" badge, transitions to a blended dark background, highlights the text in green, adds a checkmark icon, and finally repositions the icon using "negative margin-inline-start" for better alignment.

Haz @haz.dev · 8mo ago

Ariakit has hit 500k weekly downloads! Still a long way to go.

Weekly downloads chart showing 505,108 with an upward trend

Haz @haz.dev · 9mo ago

Thank you thanks.dev for sponsoring Ariakit 😊

Haz @haz.dev · 10mo ago

The new @ariakit.org app will include styled examples with copy-paste code, AI prompts, and shadcn commands for both Ariakit React and React Aria. You should be free to choose the underlying component library for your app.

Dark‑mode split view of two documentation pages. Left: “Disclosure” for Ariakit React; right: “Disclosure (React Aria).” Each page has an intro sentence about using the Disclosure component to build collapsible content, a pill tag (“Ariakit React” or “React Aria”), and a “Basic Example” card showing an expanded disclosure titled “How do I get started?” with two paragraphs. Small action icons (preview eye, code, external) sit above the example on both sides.

Haz @haz.dev · 10mo ago

A sneak peek at the upcoming Ariakit examples

Haz @haz.dev · 10mo ago

Tooltips are an accessibility nightmare, but if you want to make them as accessible as possible, make sure users can move the cursor over them. Some magnifier tools use the cursor position. If the tooltip closes when the cursor moves away from the anchor, it will not work.