CommandDialog() — ui Function Reference

Architecture documentation for the CommandDialog() function in command.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CommandDialog() — ui Function Reference

Dependency Diagram

graph TD
  90c11acf_625b_7a2a_69cf_c584a878a076["CommandDialog()"]
  10857045_23ce_0bc6_2bea_40b3b73a8c34["command.tsx"]
  90c11acf_625b_7a2a_69cf_c584a878a076 -->|defined in| 10857045_23ce_0bc6_2bea_40b3b73a8c34
  style 90c11acf_625b_7a2a_69cf_c584a878a076 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/ui-rtl/command.tsx lines 32–63

function CommandDialog({
  title = "Command Palette",
  description = "Search for a command to run...",
  children,
  className,
  showCloseButton = false,
  ...props
}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
  title?: string
  description?: string
  className?: string
  showCloseButton?: boolean
  children: React.ReactNode
}) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
        className={cn(
          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
          className
        )}
        showCloseButton={showCloseButton}
      >
        {children}
      </DialogContent>
    </Dialog>
  )
}