A command palette that allows users to search and execute commands. Built on top of cmdk.
import { Command } from "@ngrok/mantle/command";
import { CalendarIcon, SmileyIcon, CalculatorIcon, UserIcon } from "@phosphor-icons/react";
<Command.Root className="rounded-lg border border-dialog shadow-lg bg-dialog md:min-w-112.5">
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>
<CalendarIcon />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<SmileyIcon />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<CalculatorIcon />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<UserIcon />
<span>Profile</span>
</Command.Item>
</Command.Group>
</Command.List>
</Command.Root>;Press Control⌃Jor
import { Button } from "@ngrok/mantle/button";
import { Command, MetaKey } from "@ngrok/mantle/command";
import {
CalculatorIcon,
CalendarIcon,
CreditCardIcon,
GearIcon,
SmileyIcon,
UserIcon,
} from "@phosphor-icons/react";
import { useEffect, useState } from "react";
function useHotkey(key: string, callback: () => void) {
useEffect(() => {
const keydown = (event: KeyboardEvent) => {
if (event.key === key && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
callback();
}
};
document.addEventListener("keydown", keydown);
return () => document.removeEventListener("keydown", keydown);
});
}
function CommandDialogDemo() {
const [open, setOpen] = useState(false);
useHotkey("j", () => setOpen(!open));
return (
<>
<p className="text-muted-foreground text-sm gap-2 flex items-center">
Press{" "}
<kbd className="bg-muted text-muted pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
<span className="text-xs">
<MetaKey />
</span>
J
</kbd>
or
<Button type="button" onClick={() => setOpen(!open)}>
Open Command Dialog
</Button>
</p>
<Command.Dialog open={open} onOpenChange={setOpen}>
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>
<CalendarIcon />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<SmileyIcon />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<CalculatorIcon />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<UserIcon />
<span>Profile</span>
<Command.Shortcut>
<MetaKey /> P
</Command.Shortcut>
</Command.Item>
<Command.Item>
<CreditCardIcon />
<span>Billing</span>
<Command.Shortcut>
<MetaKey /> B
</Command.Shortcut>
</Command.Item>
<Command.Item>
<GearIcon />
<span>Settings</span>
<Command.Shortcut>
<MetaKey /> S
</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</Command.Dialog>
</>
);
}The Command component is built on top of cmdk and provides a complete set of sub-components for building command palettes.
The root component for the Command. It provides the context for all other command sub-components.
All props from cmdk's Command Root.
A window overlaid on either the primary window or another dialog window. The root stateful component for the CommandDialog.
All props from cmdk's Command Dialog, plus:
The input component for the Command. It provides the input for the command palette.
All props from cmdk's Command Input.
The list component for the Command. It provides the scrollable list for the command palette.
All props from cmdk's Command List.
The empty component for the Command. Displayed when no results match the search query.
All props from cmdk's Command Empty.
The group component for the Command. Used to group related command items together.
All props from cmdk's Command Group.
The item component for the Command. Represents a selectable command in the palette.
All props from cmdk's Command Item.
A visual separator between command groups or items.
All props from cmdk's Command Separator.
Displays a keyboard shortcut hint within a command item. Renders as a styled span element.
All props from the HTML span element.
Renders the platform-appropriate meta key label (⌘ for macOS/iOS or Ctrl for other platforms). It detects the platform on mount and is SSR-safe, defaulting to Ctrl to avoid hydration mismatches.
Use it in keyboard shortcut hints and Command.Shortcut labels to ensure the correct modifier key is displayed for each platform.
import { Command, MetaKey } from "@ngrok/mantle/command";
<kbd>
<MetaKey /> K
</kbd>
<Command.Shortcut>
<MetaKey /> S
</Command.Shortcut>A hook for accessing the command palette state.
All props from cmdk's useCommandState.