Command

A searchable interface for quickly executing commands or actions.

Docs
command-demo.tsx
import {
	ArrowRightIcon,
	LayoutGridIcon,
	PlusIcon,
	UsersIcon,
} from "lucide-react"
 
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
	CommandSeparator,
	CommandShortcut,
} from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"
 
export function CommandDemo() {
	return (
		<Command>
			<CommandInput placeholder="Type a command or search..." />
			<CommandList>
				<CommandEmpty>No results found.</CommandEmpty>
				<CommandGroup heading="Projects">
					<CommandItem>
						<LayoutGridIcon />
						<span>Search projects...</span>
						<CommandShortcut>
							<Kbd>āŒ˜</Kbd>
							<Kbd>P</Kbd>
						</CommandShortcut>
					</CommandItem>
					<CommandItem>
						<PlusIcon />
						<span>Create new projecte...</span>
						<CommandShortcut>
							<Kbd>C</Kbd>
						</CommandShortcut>
					</CommandItem>
				</CommandGroup>
				<CommandSeparator />
				<CommandGroup heading="Teams">
					<CommandItem>
						<UsersIcon />
						<span>Search teams...</span>
					</CommandItem>
					<CommandItem>
						<PlusIcon />
						<span>Create new team...</span>
						<CommandShortcut>
							<Kbd>T</Kbd>
						</CommandShortcut>
					</CommandItem>
				</CommandGroup>
				<CommandGroup heading="Navigation">
					<CommandItem>
						<ArrowRightIcon />
						<span>Go to home</span>
					</CommandItem>
					<CommandItem>
						<ArrowRightIcon />
						<span>Go to profile</span>
					</CommandItem>
					<CommandItem>
						<ArrowRightIcon />
						<span>Go to settings</span>
					</CommandItem>
					<CommandItem>
						<ArrowRightIcon />
						<span>Go to billing</span>
					</CommandItem>
				</CommandGroup>
			</CommandList>
		</Command>
	)
}

About

The Command is built on top of cmdk-base, which is ported from cmdk, originally created by @pacocoursey.

Installation

npx shadcn@latest add https://9ui.dev/r/command

Usage

Imports
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
	CommandSeparator,
	CommandShortcut,
} from "@/components/ui/command"
Anatomy
<Command>
	<CommandInput />
	<CommandList>
		<CommandEmpty />
		<CommandGroup>
			<CommandItem>
				<CommandShortcut />
			</CommandItem>
		</CommandGroup>
		<CommandSeparator />
	</CommandList>
</Command>

Examples

Dialog

āŒ˜
+
K
command-dialog.tsx
"use client"
 
import { useEffect, useState } from "react"
import {
	ArrowRightIcon,
	LayoutGridIcon,
	PlusIcon,
	UsersIcon,
} from "lucide-react"
 
import {
	CommandDialog,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
	CommandSeparator,
	CommandShortcut,
} from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"
 
export function CommandDialogDemo() {
	const [open, setOpen] = useState(false)
 
	useEffect(() => {
		const down = (e: KeyboardEvent) => {
			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
				e.preventDefault()
				setOpen((open) => !open)
			}
		}
		document.addEventListener("keydown", down)
		return () => document.removeEventListener("keydown", down)
	}, [])
 
	return (
		<>
			<div className="flex items-center gap-2 text-sm">
				<Kbd>āŒ˜</Kbd>+<Kbd>K</Kbd>
			</div>
			<CommandDialog open={open} onOpenChange={setOpen}>
				<CommandInput placeholder="Type a command or search..." />
				<CommandList>
					<CommandEmpty>No results found.</CommandEmpty>
					<CommandGroup heading="Projects">
						<CommandItem>
							<LayoutGridIcon />
							<span>Search projects...</span>
							<CommandShortcut>
								<Kbd>āŒ˜</Kbd>
								<Kbd>P</Kbd>
							</CommandShortcut>
						</CommandItem>
						<CommandItem>
							<PlusIcon />
							<span>Create new projecte...</span>
							<CommandShortcut>
								<Kbd>C</Kbd>
							</CommandShortcut>
						</CommandItem>
					</CommandGroup>
					<CommandSeparator />
					<CommandGroup heading="Teams">
						<CommandItem>
							<UsersIcon />
							<span>Search teams...</span>
						</CommandItem>
						<CommandItem>
							<PlusIcon />
							<span>Create new team...</span>
							<CommandShortcut>
								<Kbd>T</Kbd>
							</CommandShortcut>
						</CommandItem>
					</CommandGroup>
					<CommandGroup heading="Navigation">
						<CommandItem>
							<ArrowRightIcon />
							<span>Go to home</span>
						</CommandItem>
						<CommandItem>
							<ArrowRightIcon />
							<span>Go to profile</span>
						</CommandItem>
						<CommandItem>
							<ArrowRightIcon />
							<span>Go to settings</span>
						</CommandItem>
						<CommandItem>
							<ArrowRightIcon />
							<span>Go to billing</span>
						</CommandItem>
					</CommandGroup>
				</CommandList>
			</CommandDialog>
		</>
	)
}