Command
Searchable commands grouped in a compact list.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Command
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/command.json'Usage
A complete example using the installed component and hook paths.
Command usage
"use client";type PreviewProps = { interactive?: boolean };import { useState } from "react";import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";function CommandPreview({ interactive }: PreviewProps) { const [selected, setSelected] = useState(""); return ( <div className="w-full max-w-64 rounded-lg border"> <Command> <CommandInput placeholder="Find an action" aria-label="Find an action" /> <CommandList> <CommandEmpty>No matching actions</CommandEmpty> <CommandGroup heading="Actions"> {["Copy", "Paste", "Select all"].map((action) => ( <CommandItem key={action} onSelect={() => interactive && setSelected(action)}> {action} </CommandItem> ))} </CommandGroup> </CommandList> </Command> {interactive && selected && ( <output className="block px-2 pb-2 text-xs text-muted-foreground"> Selected: {selected} </output> )} </div> );}export default function Demo() { return <CommandPreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Command
Command props
React.ComponentProps<typeof CommandPrimitive> & { sound?: boolean }- defaultValue
- ""
- sound
- true
CommandDialog
CommandDialog props
Omit<React.ComponentProps<typeof Dialog>, "children"> & { title?: string; description?: string; className?: string; showCloseButton?: boolean; children: React.ReactNode;}- title
- "Command Palette"
- description
- "Search for a command to run..."
- showCloseButton
- false
CommandInput
CommandInput props
React.ComponentProps<typeof CommandPrimitive.Input>CommandList
CommandList props
React.ComponentProps<typeof CommandPrimitive.List>CommandEmpty
CommandEmpty props
React.ComponentProps<typeof CommandPrimitive.Empty>CommandGroup
CommandGroup props
React.ComponentProps<typeof CommandPrimitive.Group>CommandItem
CommandItem props
React.ComponentProps<typeof CommandPrimitive.Item> & { sound?: boolean }- sound
- true
CommandShortcut
CommandShortcut props
React.ComponentProps<"span">CommandSeparator
CommandSeparator props
React.ComponentProps<typeof CommandPrimitive.Separator>