NovaUI
Components

Command

A command palette with search input and filterable list of actions.

The Command component provides a searchable command palette UI. It includes a search input, scrollable list of items organized in groups, and built-in text filtering. It can be used standalone or inside a dialog for a spotlight-like experience.

Preview

Type a command or search...
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile⌘P
Mail⌘B
Settings⌘S

Installation

npx novaui-cli add command

Import

import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from 'novaui-components'

Basic Usage

Type a command or search...
Suggestions
Calendar
Search Emoji
Calculator
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from 'novaui-components'

export function BasicCommand() {
  return (
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Command Dialog

Use CommandDialog to render the command palette inside a modal dialog:

Search commands...
Actions
New File⌘N
Open File⌘O
Save⌘S
import { useState } from 'react'
import {
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
} from 'novaui-components'
import { Button } from 'novaui-components'

export function CommandDialogExample() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button variant="outline" label="Open Command" onPress={() => setOpen(true)} />
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Search commands..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Actions">
            <CommandItem onSelect={() => setOpen(false)}>
              New File
              <CommandShortcut>⌘N</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              Open File
              <CommandShortcut>⌘O</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={() => setOpen(false)}>
              Save
              <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  )
}

With Groups and Separators

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>
        Profile
        <CommandShortcut>⌘P</CommandShortcut>
      </CommandItem>
      <CommandItem>
        Mail
        <CommandShortcut>⌘B</CommandShortcut>
      </CommandItem>
      <CommandItem>
        Settings
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Props API

Command

Extends React.ComponentPropsWithoutRef<typeof View>:

PropTypeDefaultDescription
filter(value: string, search: string) => number-Custom filter function
classNamestring-Additional CSS classes

CommandDialog

Extends Dialog props:

PropTypeDefaultDescription
openboolean-Controlled open state
onOpenChange(open: boolean) => void-Callback when open state changes

CommandInput

Extends React.ComponentPropsWithoutRef<typeof TextInput>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CommandList

Extends React.ComponentPropsWithoutRef<typeof ScrollView>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CommandGroup

PropTypeDefaultDescription
headingstring-Group heading text
classNamestring-Additional CSS classes

CommandItem

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

PropTypeDefaultDescription
valuestring-The value used for filtering
onSelect() => void-Callback when the item is selected

CommandEmpty

PropTypeDefaultDescription
classNamestring-Additional CSS classes

Best Practices

  1. Provide an empty state: Always include CommandEmpty with a helpful message
  2. Use groups: Organize items with CommandGroup and headings for scannability
  3. Add shortcuts: Show keyboard shortcuts with CommandShortcut for power users
  4. Filter by value: Set value on CommandItem when the display text differs from the filter string
  5. Use dialog for spotlight: Wrap in CommandDialog for a floating command palette experience
  • Dialog - For general-purpose modals
  • Select - For value selection from a list
  • Combobox - For searchable selection with a trigger

On this page