Command

The ⌘K palette — subsequence search over grouped actions, with shortcut hints.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Button, Command, Kbd, useCommandShortcut, type CommandItem } from "@aile.sh/elia";

const ITEMS: CommandItem[] = [
  { id: "new-run", label: "New evaluation run", group: "Actions", shortcut: ["⌘", "N"] },
  { id: "deploy", label: "Deploy to production", group: "Actions", hint: "aile-pro · v14" },
  { id: "invite", label: "Invite teammate", group: "Actions", keywords: ["member", "seat"] },
  { id: "docs", label: "Open documentation", group: "Navigate", shortcut: ["G", "D"] },
  { id: "billing", label: "Billing and usage", group: "Navigate" },
  { id: "archive", label: "Archive workspace", group: "Danger", disabled: true },
];

export function Example() {
  const [open, setOpen] = useState(false);
  useCommandShortcut(() => setOpen(true));

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Open palette <Kbd>⌘K</Kbd>
      </Button>
      <Command
        open={open}
        onClose={() => setOpen(false)}
        items={ITEMS}
        footer={<span>Try "dpl" — matching is subsequence-based.</span>}
      />
    </>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia