Getting Started

Ariakit React is an open-source library offering unstyled primitive components to build accessible web apps, design systems, and component libraries.

Installation

First, make sure you have react and react-dom installed. Ariakit React works with React 18 and above.
Install Ariakit React.
```
npm install @ariakit/react
```

Usage

Combobox Group

index.tsx

import {
  Combobox,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxItem,
} from "@ariakit/ui/components/combobox.ariakit.react";
import { matchSorter } from "match-sorter";
import * as React from "react";
import data from "./data.ts";

export default function Example() {
  const [value, setValue] = React.useState("");
  const deferredValue = React.useDeferredValue(value);

  const matches = React.useMemo(() => {
    const keys = ["name", "email", "folder"];
    const items = matchSorter(data, deferredValue, {
      keys,
      baseSort: (a, b) => (a.index < b.index ? -1 : 1),
    });
    return Object.entries(
      Object.groupBy(items, (item) => {
        if ("folder" in item) return "Files";
        return "Members";
      }),
    );
  }, [deferredValue]);

  return (
    <div className="flex flex-col gap-2">
      <Combobox
        label="Find records"
        autoSelect
        autoComplete="both"
        placeholder="e.g., John Doe"
        inputValue={value}
        setInputValue={setValue}
        className="w-64"
      >
        {!matches.length && <ComboboxEmpty />}
        {matches.map(([type, items]) => (
          <ComboboxGroup key={type} label={type}>
            {items.map((item) => (
              <ComboboxItem key={item.name} value={item.name} />
            ))}
          </ComboboxGroup>
        ))}
      </Combobox>
    </div>
  );
}

data.ts

export const members = [
  { name: "John Smith", email: "john@example.com" },
  { name: "Emma Johnson", email: "emma@example.com" },
  { name: "Michael Brown", email: "michael@example.com" },
  { name: "Sarah Davis", email: "sarah@example.com" },
];

export const files = [
  { name: "annual_report.pdf", folder: "Documents" },
  { name: "project_plan.docx", folder: "Documents" },
  { name: "logo.png", folder: "Images" },
  { name: "team_photo.jpg", folder: "Images" },
  { name: "main.js", folder: "Code" },
  { name: "styles.css", folder: "Code" },
  { name: "data.json", folder: "Code" },
  { name: "images_backup.tar.gz", folder: "Archives" },
  { name: "legacy_code.zip", folder: "Archives" },
];

const data = [...members, ...files];

export default data;