Docs
Command

Command

Fast, composable, unstyled command menu for React.

About

The <Command /> component uses the cmdk component by pacocoursey.

Usage

import shadcn.ui.components.*

Command {
    CommandInput { placeholder = "Type a command or search..." }
    CommandList {
        CommandEmpty { +"No results found." }
        CommandGroup {
            heading = ReactNode("Suggestions")
            CommandItem { +"Calendar" }
            CommandItem { +"Search Emoji" }
            CommandItem { +"Calculator" }
        }
        CommandSeparator {}
        CommandGroup {
            heading = ReactNode("Settings")
            CommandItem { +"Profile" }
            CommandItem { +"Billing" }
            CommandItem { +"Settings" }
        }
    }
}

Examples

Dialog

Press ⌘K

To show the command menu in a dialog, use the CommandDialog {} component.

val CommandMenu = FC<Props> {
    val (open, setOpen) = useState(false)
    rawUseEffect({
        val down = { it: Event ->
            if (it.asDynamic().key === "k") {
                setOpen(!open)
            }
        }
        document.addEventListener("keydown", down)
        val cleanup: Cleanup =  { document.removeEventListener("keydown", down) }
        cleanup
    })
    
    CommandDialog {
        this.open = open
        onOpenChange = setOpen
        
        CommandInput { placeholder = "Type a command or search..." }
        CommandList {
            CommandEmpty { +"No results found." }
            CommandGroup {
                CommandItem { +"Calendar" }
                CommandItem { +"Search Emoji " }
                CommandItem { +"Calculator" }
            }
        }
    }
}

Combobox

You can use the <Command /> component as a combobox. See the Combobox page for more information.

ComboboxContext Menu