Ariakit
LightNews LightNews
banner
ariakit.org
Ariakit
@ariakit.org
410 followers 3 following 2 posts
Toolkit with accessible components, styles, and examples for your next web app
https://ariakit.org
Posts Replies Media Videos
Pinned
ariakit.org
Ariakit @ariakit.org · Nov 2
Building something with @ariakit.org?

Share it here on 🦋 Bluesky mentioning us and we will repost.
Reposted by Ariakit
haz.dev
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.
February 6, 2026 at 12:44 PM
Reposted by Ariakit
haz.dev
This border-radius transition 🤌🏽
Believe it or not, it's just CSS.
February 3, 2026 at 6:25 AM
Reposted by Ariakit
haz.dev
Concentric border radius
Infographic explaining concentric border radius formula: inner radius = parent radius - padding
February 2, 2026 at 1:08 AM
Reposted by Ariakit
haz.dev
A drop shadow can make a big difference.
A visual comparison of two segmented toggle switches with "Profile" selected. The top version uses a flat white pill for the active state with no shadow, blending smoothly with the track. The bottom version adds a visible drop shadow to the white pill, giving it a lifted, floating appearance.
February 1, 2026 at 1:20 AM
Reposted by Ariakit
haz.dev
I’m experimenting with a high-level, styled Button component API.

Yes or no?
Diagram illustrating component composition for various button styles. 1. Top Center: A simple "Button" rendered with `<Button>Button</Button>`. 2. Top Left: A square button with a plus icon, using `<ButtonIcon>` and screen-reader text. 3. Top Right: A white pill button "+ Follow back" using props `$bg="invert" $radius="round" $px="xl"`. 4. Center Left: A badge-style button "Technology 43" with a computer icon and a count span. 5. Bottom Left: A "Following" button with a checkmark icon using `$radius="round"`. 6. Bottom Right: A large profile button for "Haz @diegohaz" demonstrating complex layout with `$orientation="vertical"`, `$rowSpan`, and nested content (image, label, description, icons).
January 20, 2026 at 6:28 PM
Reposted by Ariakit
haz.dev
TIL you can show different images for light and dark modes in GitHub README files using HTML or Markdown:
Instructional diagram about adaptive images on GitHub. - Method 1 (HTML): A code snippet using `<picture>` with `<source media="(prefers-color-scheme: light)" ...>` and a corresponding dark version. - Method 2 (Markdown): Code snippet showing `![Logo](...#gh-dark-mode-only)` and `![Logo](...#gh-light-mode-only)`. - Visual Output: Arrows point from the code to two versions of the "ariakit" logo—one optimized for a dark background (white text) and one for a light background (black text).
January 19, 2026 at 4:43 PM
Reposted by Ariakit
haz.dev
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.
January 18, 2026 at 5:48 PM
Reposted by Ariakit
haz.dev
UI buttons
Collection of various UI button styles including primary, secondary, icon, and dropdown variants
January 17, 2026 at 4:22 PM
Reposted by Ariakit
haz.dev
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.
January 16, 2026 at 3:48 PM
Reposted by Ariakit
haz.dev
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).
January 15, 2026 at 4:36 PM
Reposted by Ariakit
haz.dev
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.
January 14, 2026 at 1:42 PM
Reposted by Ariakit
haz.dev
Ariakit has hit 500k weekly downloads!

Still a long way to go.
Weekly downloads chart showing 505,108 with an upward trend
December 17, 2025 at 7:58 AM
Reposted by Ariakit
haz.dev
Thank you thanks.dev for sponsoring Ariakit 😊
Screenshot of a GitHub Sponsors message with the Octocat logo and the headline “You have a new sponsor!” The line below says “@thnxdev is now sponsoring @ariakit for $219.00 one time!”
November 12, 2025 at 3:54 PM
Reposted by Ariakit
haz.dev
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.
October 5, 2025 at 12:53 PM
Reposted by Ariakit
haz.dev
A sneak peek at the upcoming Ariakit examples
October 3, 2025 at 5:45 PM
Reposted by Ariakit
haz.dev
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.
October 3, 2025 at 2:12 PM
Reposted by Ariakit
haz.dev
Nested disclosure widgets
October 2, 2025 at 3:04 PM
Reposted by Ariakit
haz.dev
Collapsible sidebar built with @ariakit.org
September 30, 2025 at 2:41 PM
Reposted by Ariakit
haz.dev
1, 2, or 3?
A triptych of a documentation navigation sidebar for “Acme Corp,” each panel using a light gray surface with a blue triangular logo at the top. The “Getting Started” section (rocket icon with a down caret) is open, revealing four items: Introduction, Installation (displayed as the current page with a white rounded pill and subtle shadow), Quickstart, and Editor Setup. Lower in the list are two collapsed groups—“Guides” (document icon) and “Resources” (stacked‑layers icon)—each with a right‑pointing chevron. The three columns illustrate subtle style variations (e.g., faint vertical guide line and spacing), but the structure and the Installation selection remain the same across all three.
September 27, 2025 at 1:45 AM
Reposted by Ariakit
haz.dev
Sidebar with animated, collapsible groups styled with @⁠ariakit⁠/⁠tailwind

Automatic light/dark modes.⁠
September 24, 2025 at 11:41 PM
Reposted by Ariakit
haz.dev
Checkbox cards built with @ariakit.org
Register form with name, email, and interest chips; Finance and Health selected Interest chip selector in dark mode with “Finance” selected Dark‑mode “Select your interests” screen showing four cards: Technology, Culture, Health, and Finance. Culture is selected (blue check and blue outline). Technology appears dimmed with a grey check icon, while Health and Finance are unselected with empty circles.
September 24, 2025 at 7:46 PM
Reposted by Ariakit
haz.dev
Code examples with embedded API docs
September 23, 2025 at 9:02 PM
Reposted by Ariakit
haz.dev
Built with @ariakit.org
September 22, 2025 at 5:14 PM
Reposted by Ariakit
haz.dev
Preview/code blocks
September 21, 2025 at 1:35 PM
Reposted by Ariakit
haz.dev
Segmented control built with @⁠ariakit⁠/⁠tailwind
September 20, 2025 at 5:01 PM