Overlays
Command
Type to filter. Arrow keys move the inverted row.
Nothing by that name.
Gypsy Espresso 1
Kinselas 2
Pan After 3
The garden
The studio
npx shadcn@latest add https://ui.netm8.com/r/command.jsonOverlays
Type to filter. Arrow keys move the inverted row.
npx shadcn@latest add https://ui.netm8.com/r/command.jsonimport { Coffee, Disc3, Flower2, Lamp, Leaf } from "lucide-react"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandShortcut,
} from "@/components/ui/command"
export default function CommandDemo() {
return (
<Command className="h-auto w-80 border border-edge shadow-hard">
<CommandInput placeholder="Go to" />
<CommandList>
<CommandEmpty>Nothing by that name.</CommandEmpty>
<CommandGroup heading="Street">
<CommandItem>
<Coffee /> Gypsy Espresso <CommandShortcut>1</CommandShortcut>
</CommandItem>
<CommandItem>
<Disc3 /> Kinselas <CommandShortcut>2</CommandShortcut>
</CommandItem>
<CommandItem>
<Leaf /> Pan After <CommandShortcut>3</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandGroup heading="Home">
<CommandItem>
<Flower2 /> The garden
</CommandItem>
<CommandItem>
<Lamp /> The studio
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
)
}