Command

Preview

A command palette that allows users to search and execute commands. Built on top of cmdk.

Command Example

function CommandExample() {
	return (
		<Command.Root className="rounded-lg border border-dialog shadow-lg bg-dialog md:min-w-[450px]">
			<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>
	);
}

Command Dialog Example

Press CtrlJor

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 CommandDialogExample() {
	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>
		</>
	);
}

API Reference

The Command component is built on top of cmdkand provides a complete set of sub-components for building command palettes.

Command.Root

The root component for the Command. It provides the context for all other command sub-components.

All props from cmdk'sCommand Root

Command.Dialog

A window overlaid on either the primary window or another dialog window. The root stateful component for the CommandDialog.

All props from cmdk'sCommand Dialog

Command.Input

The input component for the Command. It provides the input for the command palette.

All props from cmdk's Command Input

Command.List

The list component for the Command. It provides the list for the command palette.

All props from cmdk's Command List

Command.Empty

The empty component for the Command. It provides the empty state for the command palette.

All props from cmdk's Command Empty

Command.Group

The group component for the Command. It provides the group for the command palette.

All props from cmdk's Command Group

Command.Separator

The separator component for the Command. It provides the separator for the command palette.

All props from cmdk's Command Separator

Command.Item

The item component for the Command. It provides the item for the command palette.

All props from cmdk's Command Item

Command.Shortcut

The shortcut component for the Command. It provides the shortcut for the command palette.

The MetaKey component 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>

useCommandState

The hook for the Command. It provides the state for the command palette.

All props from cmdk's useCommandState

Command Palette