Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,569
- Likes 764
ALT Snippet of JSX code using custom Menubar, Menu, MenuItem, and MenuGroup components to build navigation menubar widget.
ALT JSX snippet with a Combobox component wrapping a ComboboxEmpty component and a bunch of ComboboxItem.
ALT A screenshot shows a combobox widget filled with the character "b". The listbox, featuring five options, is open and the first item is automatically selected.
ALT A snippet of JSX code using Menubar, MenuProvider, Menu, MenuItem, and MenuButton components to create a menubar with nested menus.
ALT A screenshot of a menubar widget with an Edit menu open. Inside the open menu, the Find item is expanded into a submenu.
ALT Screenshot of a section from the Ariakit site documentation featuring a code block. The code example uses a "value" prop that's highlighted in the screenshot. A hovercard provides further details about the "value" prop.
ALT Screenshot of the hero part of the Ariakit dot org homepage
ALT Screenshot of the example preview layout on ariakit.org, with an arrow pointing from options in a dropdown menu to a persistent section of the preview div.
ALT Screenshot of the Dialog section on the Ariakit site's example page. It displays six cards, each featuring an icon, a title, and a description.
ALT Screenshot of the "Identifying nested dialogs" section from the docs linked in the post
![The following JSX code:
const [open, setOpen] = useState(false);
<Dialog
open={open}
onClose={() => setOpen(false)}
unmountOnHide
>](/pic/orig/media%2FF77qiS_WEAA3a75.png)
ALT The following JSX code: const [open, setOpen] = useState(false); <Dialog open={open} onClose={() => setOpen(false)} unmountOnHide >
![The following JSX code:
const [open, setOpen] = useState(false);
<Dialog
open={open}
onClose={(event) => setOpen(false)}
>](/pic/orig/media%2FF7xKpQRXgAAnsZE.png)
ALT The following JSX code: const [open, setOpen] = useState(false); <Dialog open={open} onClose={(event) => setOpen(false)} >
