Ariakit@ariakitjs

Toolkit with accessible components, styles, and examples for your next web app

ariakit.com
Joined July 2015
9 Photos and videos
Load newest
Ariakit retweeted
Zach@zachrip_
8 Feb 2024
Replying to @marbemac @ariakitjs
I've been using radix for a while and I thought it was really good...until I started using ariakit. Radix has made things like combobox with multi select difficult while ariakit supports it easily. Very happy to support with the plus plan.
2
2
6
1,397
Ariakit retweeted
Marc MacLeod
@marbemac
8 Feb 2024
I've been evaluating options design lib I'll be using on new projects - mostly radix-ui and react-aria-components. But WOW, why does @ariakitjs not get more attention? Incredible docs, well maintained, the composition patterns are well thought out, and I mean just look at this contributing guide... github.com/ariakit/ariakit/b… - a work of art. Digging in more today. One wish - a roadmap - even just a GH project with plans similar to what Remix does.
2
3
31
3,459
Ariakit retweeted
Haz
@diegohaz
7 Feb 2024
✨ New example: Select widget controlled by URL ✦ Next.js App Router with searchParams ✦ Prefetching ✦ React.useTransition() ✦ React.useOptimistic() ✦ Open in a new tab ✦ Preview link on mobile Demo link below.
0:50
1
8
134
12,989
Ariakit retweeted
Haz
@diegohaz
5 Feb 2024
New post on the Ariakit Newsletter: Animation, Ariakit Plus, and more newsletter.ariakit.org/p/ani…
1
4
24
2,250
Ariakit retweeted
Haz
@diegohaz
26 Jan 2024
✨ New example: Command Menu Combines the Ariakit Dialog and Combobox components to create a Raycast-like modal. ariakit.org/examples/dialog-…
The following JSX code: <Dialog> <ComboboxProvider> <Combobox /> <DialogDismiss /> <ComboboxList> <ComboboxGroup> <ComboboxGroupLabel /> <ComboboxItem /> </ComboboxGroup> </ComboboxList> </ComboboxProvider> </Dialog>

ALT The following JSX code: <Dialog> <ComboboxProvider> <Combobox /> <DialogDismiss /> <ComboboxList> <ComboboxGroup> <ComboboxGroupLabel /> <ComboboxItem /> </ComboboxGroup> </ComboboxList> </ComboboxProvider> </Dialog>

Screenshot of a section from a command menu widget

ALT Screenshot of a section from a command menu widget

8
19
300
27,721
Ariakit retweeted
Haz
@diegohaz
19 Jan 2024
Ariakit now has a dedicated Changelog page. ariakit.org/changelog It should be easier to follow than GitHub releases or markdown files (which continue to exist). Oh, and yes, version 0.4.0 has been released with enhanced CSS animation/transition support. New examples soon 🥳
Screenshot of the changelog page linked in the post

ALT Screenshot of the changelog page linked in the post
5
40
2,552
Of all the headless component libraries I've used, @ariakitjs is the most exciting. They have a ton of awesome examples, and you can do almost anything with it. Case in point 👇 ariakit.org/examples/combobo…
2
8
1,962
Ariakit retweeted
Haz
@diegohaz
27 Dec 2023
✨ New example: Radix Select with Combobox If you're using Radix in your app and want to introduce search functionality to your Select components, you can simply use the primitive Ariakit Combobox components. ariakit.org/examples/combobo…
The following JSX code demonstrating the basic structure to combine Radix Select and Ariakit Combobox: <RadixSelect.Root> <ComboboxProvider> <RadixSelect.Trigger /> <RadixSelect.Content> <Combobox /> <ComboboxList> <RadixSelect.Item asChild> <ComboboxItem /> </RadixSelect.Item> </ComboboxList> </RadixSelect.Content> </ComboboxProvider> </RadixSelect.Root>

ALT The following JSX code demonstrating the basic structure to combine Radix Select and Ariakit Combobox: <RadixSelect.Root> <ComboboxProvider> <RadixSelect.Trigger /> <RadixSelect.Content> <Combobox /> <ComboboxList> <RadixSelect.Item asChild> <ComboboxItem /> </RadixSelect.Item> </ComboboxList> </RadixSelect.Content> </ComboboxProvider> </RadixSelect.Root>

ALT Quick screencast showing the usage of a custom select widget with search functionality

5
14
183
13,780
Ariakit retweeted
Haz
@diegohaz
23 Dec 2023
✨ New example: Combobox with tabs It combines Combobox and Tab components to create an accessible combobox widget, where options are organized into tabs. ariakit.org/examples/combobo…
Screenshot of a JSX snippet showing the basic structure of the Combobox with tabs example: - It renders Combobox and ComboboxPopover within ComboboxProvider. - ComboboxPopover has two direct children: ComboboxTabList and ComboboxPanel. - ComboboxTab is rendered inside ComboboxTabList. - ComboboxItem is rendered inside ComboboxPanel.

ALT Screenshot of a JSX snippet showing the basic structure of the Combobox with tabs example: - It renders Combobox and ComboboxPopover within ComboboxProvider. - ComboboxPopover has two direct children: ComboboxTabList and ComboboxPanel. - ComboboxTab is rendered inside ComboboxTabList. - ComboboxItem is rendered inside ComboboxPanel.

Screenshot of the combobox with tabs widget in light mode. The combobox input has a value and the first option of the All tab is selected.

ALT Screenshot of the combobox with tabs widget in light mode. The combobox input has a value and the first option of the All tab is selected.

Screenshot of the combobox with tabs widget in dark mode. The combobox input is empty. The first option, Button, is selected within the Component tab panel.

ALT Screenshot of the combobox with tabs widget in dark mode. The combobox input is empty. The first option, Button, is selected within the Component tab panel.

7
27
329
34,204
Ariakit retweeted
Haz
@diegohaz
21 Dec 2023
Working on this UI to make it as accessible as possible. Coming soon to Ariakit.org
Screenshot of an open combobox widget with tabs inside its popup. The first option within the selected tab panel is highlighted. At the bottom, there are instructions for keyboard usage: use vertical arrow keys for navigation; horizontal arrow keys to switch between tabs; and Enter to select.

ALT Screenshot of an open combobox widget with tabs inside its popup. The first option within the selected tab panel is highlighted. At the bottom, there are instructions for keyboard usage: use vertical arrow keys for navigation; horizontal arrow keys to switch between tabs; and Enter to select.

3
10
90
8,455
Ariakit retweeted
Haz
@diegohaz
20 Dec 2023
In the next version, the Ariakit Combobox will support a modal mode: <ComboboxPopover modal> Users will have the ability to interact with and tab through all combobox controls. This includes the combobox input, as well as the clear and disclosure buttons that are rendered outside the popover. The rest of the page will be inert. This is useful when you want to prevent accidentally closing the combobox popover by hitting Tab.
2
3
24
2,761
Ariakit retweeted
Guillermo Rauch
@rauchg
15 Dec 2023
World class
Haz
@diegohaz
15 Dec 2023
✨ New example: Submenu with Combobox A Notion-style dropdown menu with search features. Tested with VoiceOver, NVDA, JAWS, and TalkBack. More details in the docs: ariakit.org/examples/menu-ne…
0:06
4
4
97
26,851
Ariakit retweeted
Haz
@diegohaz
15 Dec 2023
✨ New example: Submenu with Combobox A Notion-style dropdown menu with search features. Tested with VoiceOver, NVDA, JAWS, and TalkBack. More details in the docs: ariakit.org/examples/menu-ne…
0:06
7
25
331
65,297
Ariakit retweeted
Haz
@diegohaz
13 Dec 2023
My goal with Ariakit.org examples isn't to tell developers and designers what they should not do, but to take what they're already doing and make it as accessible as possible. It's about solutions, not problems. If there are issues with the existing patterns, we'll include a note suggesting better alternatives:
Screenshot of the "Dialog with details & summary" page on Ariakit.org. The page includes a warning at the top that suggests other examples as better alternatives.

ALT Screenshot of the "Dialog with details & summary" page on Ariakit.org. The page includes a warning at the top that suggests other examples as better alternatives.

1
4
42
3,884
At @attio, we use Radix as our core component library. For the cmd+k, Radix lacked Combobox, so I used @​ariakit/react. It plays well with Radix, supports keyboard navigation, and offers insane customization options. Thanks to @diegohaz for the support!
0:12
Haz
@diegohaz
4 Dec 2023
✨ New example: Radix UI Combobox If you're already using Radix UI in your project and need a Combobox, you can take just the necessary components from Ariakit and use them along with Radix UI. Code and demo: ariakit.org/examples/combobo…
The following JSX code: <RadixPopover.Root> <ComboboxProvider> <RadixPopover.Anchor asChild> <Combobox /> </RadixPopover.Anchor> <RadixPopover.Content asChild> <ComboboxList> <ComboboxItem /> </ComboboxList> </RadixPopover.Content> </ComboboxProvider> </RadixPopover.Root>

ALT The following JSX code: <RadixPopover.Root> <ComboboxProvider> <RadixPopover.Anchor asChild> <Combobox /> </RadixPopover.Anchor> <RadixPopover.Content asChild> <ComboboxList> <ComboboxItem /> </ComboboxList> </RadixPopover.Content> </ComboboxProvider> </RadixPopover.Root>

Screenshot of an expanded combobox widget labeled "Your favorite fruit," displaying five options named after fruits, each with its corresponding emoji.

ALT Screenshot of an expanded combobox widget labeled "Your favorite fruit," displaying five options named after fruits, each with its corresponding emoji.

2
9
152
26,655
Ariakit retweeted
Haz
@diegohaz
4 Dec 2023
✨ New example: Radix UI Combobox If you're already using Radix UI in your project and need a Combobox, you can take just the necessary components from Ariakit and use them along with Radix UI. Code and demo: ariakit.org/examples/combobo…
The following JSX code: <RadixPopover.Root> <ComboboxProvider> <RadixPopover.Anchor asChild> <Combobox /> </RadixPopover.Anchor> <RadixPopover.Content asChild> <ComboboxList> <ComboboxItem /> </ComboboxList> </RadixPopover.Content> </ComboboxProvider> </RadixPopover.Root>

ALT The following JSX code: <RadixPopover.Root> <ComboboxProvider> <RadixPopover.Anchor asChild> <Combobox /> </RadixPopover.Anchor> <RadixPopover.Content asChild> <ComboboxList> <ComboboxItem /> </ComboboxList> </RadixPopover.Content> </ComboboxProvider> </RadixPopover.Root>

Screenshot of an expanded combobox widget labeled "Your favorite fruit," displaying five options named after fruits, each with its corresponding emoji.

ALT Screenshot of an expanded combobox widget labeled "Your favorite fruit," displaying five options named after fruits, each with its corresponding emoji.

9
19
377
81,523
Ariakit retweeted
Haz
@diegohaz
3 Dec 2023
Ariakit v0.3.8 introduces a new prop for Combobox components: selectedValue If you pass an array to this prop, the combobox will automatically become multi-selectable. Docs: ariakit.org/reference/combob…
Screenshot of a multi-selectable combobox

ALT Screenshot of a multi-selectable combobox

2
4
49
5,754
Ariakit retweeted
Haz
@diegohaz
2 Dec 2023
In Ariakit, given how composite components work, you can also use the Combobox component with the roving tabindex method. This means the DOM focus is on the listbox options, not the input. Pressing any printable key will move the focus back to the input. ariakit.org/reference/combob…
0:14
3
4
35
5,617
Ariakit retweeted
Haz
@diegohaz
1 Dec 2023
Pressing Tab on the Navigation Menubar automatically expands submenus. Keyboard focus is equivalent to hover (which also works in this example). Additionally, the focus order is preserved, even though the popup is rendered in a React Portal. ariakit.org/examples/menubar…
0:18
3
17
1,501
Ariakit retweeted
dani@daniguardio_la
29 Nov 2023
Ariakit Plus is 100% worth your money.
Haz
@diegohaz
29 Nov 2023
New post: Ariakit Plus newsletter.ariakit.org/p/ari… 💌
2
8
1,466
Load more