Ariakit Documentation

Ariakit is a toolkit providing accessible components, styles, and examples for web applications. It offers specialized packages for different frameworks and styling approaches.

Core Packages

• @ariakit/react: The primary React integration.
• @ariakit/solid: Experimental support for SolidJS.
• @ariakit/tailwind: Experimental support for Tailwind CSS.

For detailed documentation, component lists, and usage examples, visit Ariakit.com.

The Menu component allows users to access a set of commands, actions, links, or settings within a dropdown. It follows the WAI-ARIA Menu and Menu Button patterns.

Use Menu when the purpose is to trigger actions (e.g., an 'Edit' menu). If the purpose is to select a single value from a list (e.g., selecting a country), use the Select component instead.

Ariakit provides a set of accessible form components and hooks for React to manage form state, submission, and validation. The components are designed to work with the WAI-ARIA Form Role and support both built-in browser validation and custom JavaScript validation.

<FormProvider>
  <Form>
    <FormGroup>
      <FormGroupLabel />
      <FormLabel />
      <FormControl />
      <FormInput />
      <FormCheckbox />
      <FormDescription />
      <FormError />
      <FormPush />
      <FormRemove />
    </FormGroup>
    <FormRadioGroup>
      <FormRadio />
    </FormRadioGroup>
    <FormReset />
    <FormSubmit />
  </Form>
</FormProvider>

Component providers accept callback functions for state changes. These callbacks are named after the state property they modify, prefixed with set (e.g., setValue, onOpenChange, onToggle). They are invoked with the new state whenever an update occurs.

<SelectProvider
  setValue={(value) => {
    console.log(value);
  }}
>

The Popover component displays a popup dialog positioned relative to an anchor element. It supports both modal and non-modal modes and can optionally be rendered via a React portal.

To use the Popover, you must wrap your components in a PopoverProvider. The component structure typically includes an anchor, a disclosure element to trigger the popover, and the popover content itself which can contain an arrow, heading, description, and dismissal controls.

usePopoverStore()
usePopoverContext()

<PopoverProvider>
  <PopoverAnchor />
  <PopoverDisclosure />
  <Popover>
    <PopoverArrow />
    <PopoverHeading />
    <PopoverDescription />
    <PopoverDismiss />
  </Popover>
</PopoverProvider>

The Group component is an abstract container used to group related elements together. It is based on the WAI-ARIA Group Role. You can optionally provide a label for the group using the GroupLabel component to improve accessibility.

<Group>
  <GroupLabel />
  {/* Related elements go here */}
</Group>

The Heading component provides automatic hierarchy to your page contents, following the WAI-ARIA Heading Role. To define the heading level (e.g., <h1> through <h6>), wrap the Heading component with the HeadingLevel component.

<HeadingLevel>
  <Heading />
</HeadingLevel>

If you need fine-grained control, you can combine component providers with component stores by passing a manually created store to the provider via the store prop.

const select = useSelectStore({ defaultValue: "Banana" });
const value = useStoreState(select, "value");

<SelectProvider store={select}>