CommandPalette

Use CommandPalette

A modal search surface for navigating pages or running commands.

"use client";

import { FloodRoot, CommandPalette, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <CommandPalette title="Go to page" searchLabel="Search pages" trigger={props => <Button {...props}>Go to page</Button>} items={[{id:"projects",label:"All projects"}]} onAction={id => console.log(id)} />
    </FloodRoot>
  );
}

Design notes

• Choose comfortable or compact density. Items can be grouped, described or disabled.
• Opening focuses search. Enter or click runs an enabled action and requests closure. Escape and the close button return focus to the trigger.
• Use controlled query and loading for asynchronous search. The application owns requests, navigation and any global shortcut.

API reference