command

⌘K command palette with built-in scoring, groups, and a dialog wrapper.

A full-featured command palette inspired by cmdk. An input filters a list of actions using built-in substring + subsequence scoring (overridable); keyboard navigation uses aria-activedescendant so the input keeps focus at all times.

Installation

pnpm add @fluixi/command

Usage

import {
  Command, CommandInput, CommandList, CommandGroup,
  CommandItem, CommandEmpty, CommandSeparator,
} from '@fluixi/command';

<Command>
  <CommandInput placeholder="Search…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem value="new" onSelect={() => openNew()}>New file</CommandItem>
      <CommandItem value="open" onSelect={() => openFile()}>Open…</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem value="theme" onSelect={() => openTheme()}>Theme</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

As a ⌘K dialog

import { CommandDialog, CommandInput, CommandList, CommandItem } from '@fluixi/command';

<CommandDialog open={open()} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandItem value="home" onSelect={() => navigate('/')}>Home</CommandItem>
  </CommandList>
</CommandDialog>

Parts

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.