Command

Command palette for keyboard-first navigation and search.

Web Only

This component is only available for web frameworks (Vue, React, Angular). Keyboard-heavy command palettes are not suitable for mobile platforms.

Suggestions

CalendarCtrl+C

Search EmojiCtrl+E

CalculatorCtrl+K

Installation

React

npx @galaxy-stack/nebula-cli add command

Vue

npx @galaxy-stack/nebula-cli add command

Angular

npx @galaxy-stack/nebula-cli add command

global

# If you have installed galaxy-design globally
galaxy-design add command

Usage

React

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

export default function CommandDemo() {
  return (
    <Command className="rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem>
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Vue

<script setup lang="ts">
import { Command } from '@/components/command'
</script>

<template>
  <Command class="rounded-lg border shadow-md" placeholder="Type a command or search...">
    <template #default="{ search }">
      <div class="p-1">
        <div v-if="!search">No results found.</div>
        <div v-else>
          <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
            Suggestions
          </div>
          <button class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground">
            Calendar
          </button>
        </div>
      </div>
    </template>
  </Command>
</template>

API Reference

Props

Prop	Type	Default	Description	Frameworks
value	string	-	Controlled search value	React, Vue, Angular
onValueChange	(value: string) => void	-	Called when the search value changes	React, Vue, Angular
label	string	-	Accessible label for the command menu	React, Vue, Angular
loop	boolean	false	Whether keyboard navigation loops through items	React, Vue, Angular
shouldFilter	boolean	true	Whether automatic filtering is enabled	React, Vue, Angular
className / class	string	""	CSS class names	React (className), Vue/Angular (class)
placeholder	string	-	Placeholder text for the search input	Vue, Angular

Sub-components

CommandDialog

Prop	Type	Default	Description	Frameworks
open	boolean	-	Controlled open state for the dialog	React, Vue, Angular
defaultOpen	boolean	false	Initial open state for uncontrolled usage	React, Vue, Angular
onOpenChange	(open: boolean) => void	-	Called when the dialog open state changes	React, Vue, Angular

CommandInput

Prop	Type	Default	Description	Frameworks
placeholder	string	-	Placeholder text	All
className / class	string	-	CSS class names	React (className), Vue/Angular (class)

CommandList

Prop	Type	Default	Description	Frameworks
className / class	string	-	CSS class names	React (className), Vue/Angular (class)

CommandGroup

Prop	Type	Default	Description	Frameworks
heading	string	-	Group heading text	All
className / class	string	-	CSS class names	React (className), Vue/Angular (class)

CommandItem

Prop	Type	Default	Description	Frameworks
disabled	boolean	false	Disables the item	React, Vue, Angular
onSelect	(event: Event) => void	-	Called when the item is selected	React, Vue, Angular
className / class	string	-	CSS class names	React (className), Vue/Angular (class)

Components

• Command - Main command container
• CommandInput - Search input field
• CommandList - Scrollable list of items
• CommandEmpty - Shown when no results
• CommandGroup - Group of related items
• CommandItem - Individual command item
• CommandSeparator - Visual separator
• CommandShortcut - Keyboard shortcut display

Examples

Command Dialog

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 (
  <CommandDialog open={open} onOpenChange={setOpen}>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>Calendar</CommandItem>
      </CommandGroup>
    </CommandList>
  </CommandDialog>
)

Accessibility

• Keyboard navigation with arrow keys
• Type-ahead search filtering
• Proper ARIA labels and roles

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)