CommandBasic() — ui Function Reference

Architecture documentation for the CommandBasic() function in command-basic.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ CommandBasic() — ui Function Reference

Dependency Diagram

graph TD
  8b78ad0e_55e7_9b09_310d_c7e81bf8cc76["CommandBasic()"]
  7daaebf3_6fab_36f2_5e35_825ac3cf6e43["command-basic.tsx"]
  8b78ad0e_55e7_9b09_310d_c7e81bf8cc76 -->|defined in| 7daaebf3_6fab_36f2_5e35_825ac3cf6e43
  style 8b78ad0e_55e7_9b09_310d_c7e81bf8cc76 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/command-basic.tsx lines 15–38

export function CommandBasic() {
  const [open, setOpen] = React.useState(false)

  return (
    <div className="flex flex-col gap-4">
      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
        Open Menu
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Command>
          <CommandInput placeholder="Type a command or search..." />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem>Calendar</CommandItem>
              <CommandItem>Search Emoji</CommandItem>
              <CommandItem>Calculator</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </div>
  )
}