Components / Command
Command
Fast, composable, unstyled command menu.
Components
Button
Card
Dialog
Foundation
Colors
Typography
<Command class="md:min-w-[450px]">
<CommandInput placeholder="Search documentation..." />
<CommandList class="p-2">
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Components">
<CommandItem>
<svg class="mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
<span class="text-base">Button</span>
</CommandItem>
<CommandItem>
<svg class="mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
<span class="text-base">Card</span>
</CommandItem>
</CommandGroup>
</CommandList>
</Command> <!-- Root -->
<div class="flex h-full w-full flex-col overflow-hidden rounded-md bg-white border border-slate-200">
<!-- Input -->
<div class="flex items-center border-b border-slate-200 px-3">
<svg class="opacity-50">...</svg>
<input class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-500" />
</div>
<!-- List -->
<div class="max-h-[300px] overflow-y-auto p-1">
<!-- Item -->
<div class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-slate-100">
<span>Profile</span>
</div>
</div>
</div>