Command Palette

Basic command palette example demonstrating core behavior.

Package: @solidiom/command-palette
Version: 0.0.1-next.0
Status: stable

Examples

import * as CommandPalette from "@solidiom/command-palette"

;<CommandPalette.Root defaultOpen={true} onOpenChange={(open) => console.log(open)}>
  <CommandPalette.Input placeholder="Type a command..." />

  <CommandPalette.List>
    <CommandPalette.Group heading="Suggestions">
      <CommandPalette.Item value="calendar" onSelect={() => console.log("Calendar")}>
        Calendar
      </CommandPalette.Item>
      <CommandPalette.Item value="search" onSelect={() => console.log("Search")}>
        Search
      </CommandPalette.Item>
    </CommandPalette.Group>

    <CommandPalette.Group heading="Settings">
      <CommandPalette.Item value="profile" onSelect={() => console.log("Profile")}>
        Profile
      </CommandPalette.Item>
      <CommandPalette.Item value="settings" onSelect={() => console.log("Settings")}>
        Settings
      </CommandPalette.Item>
    </CommandPalette.Group>

    <CommandPalette.Empty>No results found.</CommandPalette.Empty>
  </CommandPalette.List>
</CommandPalette.Root>

The command palette provides keyboard navigation with arrow keys and Enter to select. The Empty part renders when no items match the current filter.

View source

        /**
 * @solidiom/command-palette — Headless modal command palette primitive.
 *
 * Parts: Root, Input, List, Group, Item, Empty.
 */

export {
  Root,
  Input,
  List,
  Group,
  Item,
  Empty,
  type CommandPaletteRootProps,
  type CommandPaletteInputProps,
  type CommandPaletteListProps,
  type CommandPaletteGroupProps,
  type CommandPaletteItemProps,
  type CommandPaletteEmptyProps,
} from "./command-palette"