Components
Loading preview...
Fast, composable, unstyled command menu for React.
npx shadcn@latest add https://21st.dev/r/shadcn/commandimport {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from "@/components/ui/command";
import {
ArrowLeft,
ArrowRight,
ClipboardPaste,
Copy,
Download,
FileText,
Folder,
Home,
Redo2,
RefreshCw,
Search,
Undo2,
Upload,
} from "lucide-react";
function Simple() {
return (
<Command className="w-[400px] rounded-lg border bg-background">
<CommandInput placeholder="Type a command or search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="File">
<CommandItem>
<FileText className="mr-2 size-4" />
<span>New File</span>
<CommandShortcut>⌘N</CommandShortcut>
</CommandItem>
<CommandItem>
<Folder className="mr-2 size-4" />
<span>New Folder</span>
<CommandShortcut>⇧⌘N</CommandShortcut>
</CommandItem>
<CommandItem>
<Upload className="mr-2 size-4" />
<span>Upload File</span>
<CommandShortcut>⌘U</CommandShortcut>
</CommandItem>
<CommandItem>
<Download className="mr-2 size-4" />
<span>Download File</span>
<CommandShortcut>⌘D</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Edit">
<CommandItem>
<Undo2 className="mr-2 size-4" />
<span>Undo</span>
<CommandShortcut>⌘Z</CommandShortcut>
</CommandItem>
<CommandItem>
<Redo2 className="mr-2 size-4" />
<span>Redo</span>
<CommandShortcut>⇧⌘Z</CommandShortcut>
</CommandItem>
<CommandItem>
<Search className="mr-2 size-4" />
<span>Find</span>
<CommandShortcut>⌘F</CommandShortcut>
</CommandItem>
<CommandItem>
<Copy className="mr-2 size-4" />
<span>Copy</span>
<CommandShortcut>⌘C</CommandShortcut>
</CommandItem>
<CommandItem>
<ClipboardPaste className="mr-2 size-4" />
<span>Paste</span>
<CommandShortcut>⌘V</CommandShortcut>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Navigation">
<CommandItem>
<ArrowLeft className="mr-2 size-4" />
<span>Go Back</span>
<CommandShortcut>⌘[</CommandShortcut>
</CommandItem>
<CommandItem>
<ArrowRight className="mr-2 size-4" />
<span>Go Forward</span>
<CommandShortcut>⌘]</CommandShortcut>
</CommandItem>
<CommandItem>
<Home className="mr-2 size-4" />
<span>Go to Home</span>
<CommandShortcut>⌘H</CommandShortcut>
</CommandItem>
<CommandItem>
<RefreshCw className="mr-2 size-4" />
<span>Refresh</span>
<CommandShortcut>⌘R</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
);
}
export { Simple }