ALT A screenshot of a dark page with a 2-column list with cards linking to component pages. Each card has an icon representing the component.

ALT A screenshot of a light page with a 2-column list with cards linking to component pages. Each card has an icon representing the component.

ALT A screenshot of VSCode with a focus on a hint popup. The popup has a list of links to examples in the description.

ALT A screenshot of the "More Ariakit" section of a post with the following links: Ariakit has a new logo ✨ Test files on Ariakit are now framework-agnostic Test Ariakit examples on Next.js directly from the site Contribute to Ariakit directly from the browser using Gitpod Building a multi-level sliding menu with Ariakit and CSS Scroll Snap Ariakit has workaround Fixing bad UX with Ariakit Hovercard Use the browser’s built-in search to focus on ComboboxItem Improved support for links on Ariakit comboboxes The unconventional navigation on ariakit.org Improved support for auto-select and inline auto-completion on Combobox API ideas for a vanilla JS version of Ariakit

ALT A screenshot of the "More Dev" section of a post with the following links: Detect DOM element direction (ltr/rtl) Performance: Map vs. plain objects Easy way to detect if the focus is leaving an element Using the hover media query to improve touch UX The problem with the autoFocus prop on React The best fuzzy-search library Using Unicode regular expressions to match any language Render diagrams on GitHub using markdown (my most popular tweet 😱) Render maps on GitHub using markdown Naming groups in regular expressions for better readability Always underline links within paragraphs (I wish I could do this on Substack) Why you should use interface instead of type to document APIs in TypeScript

ALT A screenshot of a page with the following contents: Reading the state Component stores in the @ariakit/react package expose a useState method. It's a custom React hook that you can use to read the state in a performant way. Watching the entire state Calling store.useState() without any arguments returns the entire state object and re-renders the component whenever the state changes. function MyCombobox() { const combobox = useComboboxStore(); const state = combobox.useState(); console.log(state.value); } Watching a specific state property Alternatively, you can pass a string to store.useState() to read the value of a specific state property. The component will only re-render when the requested value changes. const value = combobox.useState("value"); const isOpen = combobox.useState("open");

ALT The following code: test("show on click", async () => { expect(getPopover()).not.toBeVisible(); await click(getCombobox()); expect(getPopover()).toBeVisible(); expect(getOption("🍎 Apple")).not.toHaveFocus(); }); test("label click", async () => { expect(getPopover()).not.toBeVisible(); await click(getByText("Your favorite fruit")); expect(getPopover()).not.toBeVisible(); }); test("show on arrow down key", async () => { await press.Tab(); expect(getPopover()).not.toBeVisible(); await press.ArrowDown(); expect(getPopover()).toBeVisible(); expect(getOption("🍎 Apple")).not.toHaveFocus(); }); test("show on arrow up key", async () => { await press.Tab(); expect(getPopover()).not.toBeVisible(); await press.ArrowUp(); expect(getPopover()).toBeVisible(); expect(getOption("🍉 Watermelon")).not.toHaveFocus(); });

ALT The following code: beforeEach(async ({ meta }) => { const filename = meta.file?.name; if (!filename) return; const match = filename.match(/examples\/(.*)\/test.ts$/); if (!match) return; const [, example] = match; const { default: comp } = await import(`./examples/${example}/index.tsx`); const { unmount } = render(createElement(comp)); return unmount; });

ALT The following code: <Dialog> <Button>Confirm</Button> <Button autoFocus>Cancel</Button> </Dialog>