AeontelAeontel Docs

Command

Command palette primitives built on cmdk — list, item, group, dialog variant.

Usage

TSX
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@aeontel/ui";

<Command>
  <CommandInput placeholder="Search agents..." />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Agents">
      {agents.map((a) => (
        <CommandItem key={a.id} onSelect={() => onPick(a)}>
          {a.name}
        </CommandItem>
      ))}
    </CommandGroup>
  </CommandList>
</Command>;

Exports

Command

Command palette root.

TypeScript
Command(props: React.ComponentProps<typeof CommandPrimitive>): JSX.Element

CommandDialog

Command palette rendered inside a modal dialog.

TypeScript
CommandDialog(props: Omit<React.ComponentProps<typeof Dialog>, "children"> & { title?: string; description?: string; className?: string; showCloseButton?: boolean; children: React.ReactNode; }): JSX.Element

Props

PropTypeDefaultDescription
title?string | undefined"Command Palette"
description?string | undefined"Search for a command to run..."
className?string | undefined—
showCloseButton?boolean | undefinedfalse
childrenReact.ReactNode—

CommandInput

Search input for the command palette.

TypeScript
CommandInput(props: React.ComponentProps<typeof CommandPrimitive.Input>): JSX.Element

CommandList

List of command items.

TypeScript
CommandList(props: React.ComponentProps<typeof CommandPrimitive.List>): JSX.Element

CommandEmpty

Rendered when no items match the current search.

TypeScript
CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>): JSX.Element

CommandGroup

Group of related commands with a heading.

TypeScript
CommandGroup(props: React.ComponentProps<typeof CommandPrimitive.Group>): JSX.Element

CommandItem

Individual selectable command.

TypeScript
CommandItem(props: React.ComponentProps<typeof CommandPrimitive.Item>): JSX.Element

CommandSeparator

Divider between command groups.

TypeScript
CommandSeparator(props: React.ComponentProps<typeof CommandPrimitive.Separator>): JSX.Element

CommandShortcut

Keyboard shortcut hint shown alongside a command item.

TypeScript
CommandShortcut(props: React.ComponentProps<"span">): JSX.Element