Searchable commands with Minecraft suggestions and input rendering.
Preview
Usage
CommandInput uses cmdk value/onValueChange when controlled. CommandItem uses value, keywords and onSelect. The example filters commands and reports the selected value; searching for 生存 also finds Survival.
Composition
Place Input before List, then Group/Item and Empty inside the list. List defaults to the suggestions surface and also supports popup. CommandDialog composes the same command engine with Grasscn Dialog; control its open state and provide a meaningful title and description.
Interaction and limits
Command palette
CommandDialog already creates the Command root. Pass Input and List directly as its children. This example explicitly closes after selecting a command, and the dialog restores the opening button's focus.
CommandShortcut only paints a hint and does not register a global hotkey. cmdk is the intentional Radix dependency exception; the surrounding dialog remains Base UI. Group arrangements and shortcuts are web compositions beyond the original input/suggestion constituents.
See the upstream API for the underlying part and event contracts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Command as CommandPrimitive } from "cmdk";
import * as React from "react";
import { Button } from "./button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,