Command

Default

Usage

import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandSeparator, CommandItem, CommandShortcut } from '@tryvienna/ui'

<Command className="rounded-lg border shadow-md md:min-w-[450px]">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <CalendarIcon /> Calendar
      </CommandItem>
      <CommandItem>
        <SmileIcon /> Search Emoji
      </CommandItem>
      <CommandItem>
        <CalculatorIcon /> Calculator
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <UserIcon /> Profile
        <CommandShortcut>Cmd+P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <CreditCardIcon /> Billing
        <CommandShortcut>Cmd+B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <SettingsIcon /> Settings
        <CommandShortcut>Cmd+,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Default

Default

<Command className="rounded-lg border shadow-md md:min-w-[450px]">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <CalendarIcon /> Calendar
      </CommandItem>
      <CommandItem>
        <SmileIcon /> Search Emoji
      </CommandItem>
      <CommandItem>
        <CalculatorIcon /> Calculator
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        <UserIcon /> Profile
        <CommandShortcut>Cmd+P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <CreditCardIcon /> Billing
        <CommandShortcut>Cmd+B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        <SettingsIcon /> Settings
        <CommandShortcut>Cmd+,</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Dialog

Dialog

) => document.removeEventListener('keydown', down);
  }, []);

  return (
    <>
      <div className="flex flex-col items-center gap-2">
        <p className="text-sm text-muted-foreground">
          Press{' '}
          <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground select-none">
            Cmd+K
          </kbd>
        </p>
        <Button variant="outline" onClick={() => setOpen(true)}>
          Open Command Palette
        </Button>
      </div>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>
              <CalendarIcon /> Calendar
            </CommandItem>
            <CommandItem>
              <SmileIcon /> Search Emoji
            </CommandItem>
            <CommandItem>
              <CalculatorIcon /> Calculator
            </CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Settings">
            <CommandItem>
              <UserIcon /> Profile
              <CommandShortcut>Cmd+P</CommandShortcut>
            </CommandItem>
            <CommandItem>
              <CreditCardIcon /> Billing
              <CommandShortcut>Cmd+B</CommandShortcut>
            </CommandItem>
            <CommandItem>
              <SettingsIcon /> Settings
              <CommandShortcut>Cmd+,</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>

Empty

Empty

<Command className="rounded-lg border shadow-md md:min-w-[450px]">
  <CommandInput placeholder="Search for something..." value="xyznonexistent" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <CalendarIcon /> Calendar
      </CommandItem>
      <CommandItem>
        <SmileIcon /> Search Emoji
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

API Reference

Command

Also accepts all props from CommandPrimitive.

CommandDialog

Prop	Type	Default	Description
title	string	Command Palette
description	string	Search for a command to run...
showCloseButton	boolean	true

Also accepts all props from Dialog.

CommandInput

Also accepts all props from CommandPrimitive.Input.

CommandList

Also accepts all props from CommandPrimitive.List.

CommandEmpty

Also accepts all props from CommandPrimitive.Empty.

CommandGroup

Also accepts all props from CommandPrimitive.Group.

CommandSeparator

Also accepts all props from CommandPrimitive.Separator.

CommandItem

Also accepts all props from CommandPrimitive.Item.

CommandShortcut

Also accepts all props from span.

Data Attributes

Component	data-slot
Command	"command"
CommandDialog	"command-dialog"
CommandInput	"command-input-wrapper"
CommandList	"command-list"
CommandEmpty	"command-empty"
CommandGroup	"command-group"
CommandSeparator	"command-separator"
CommandItem	"command-item"
CommandShortcut	"command-shortcut"