complex

Command

Fast, composable, unstyled command menu.

Preview

A preview of the Command component with interactive controls.

Preview Code
No results found.CalendarSearch EmojiCalculatorProfile⌘PBilling⌘BSettings⌘S
Interactive

Installation

Add the Command component to your project.

Bash
ng g @ng-cn/core:c command

Usage

Import and use the Command component in your Angular application.

Template TypeScript
template.html
<Command class="rounded-lg border shadow-md">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <lucide-icon name="calendar" class="mr-2 h-4 w-4" />
        <span>Calendar</span>
      </CommandItem>
      <CommandItem>
        <lucide-icon name="smile" class="mr-2 h-4 w-4" />
        <span>Search Emoji</span>
      </CommandItem>
      <CommandItem>
        <lucide-icon name="calculator" class="mr-2 h-4 w-4" />
        <span>Calculator</span>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <lucide-icon name="user" class="mr-2 h-4 w-4" />
        <span>Profile</span>
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <lucide-icon name="settings" class="mr-2 h-4 w-4" />
        <span>Settings</span>
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Explore different variations and use cases for the Command component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
class string — Additional CSS classes to apply.