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 commandImport
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>:
| Prop | Type | Default | Description |
|---|---|---|---|
filter | (value: string, search: string) => number | - | Custom filter function |
className | string | - | Additional CSS classes |
CommandDialog
Extends Dialog props:
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
CommandInput
Extends React.ComponentPropsWithoutRef<typeof TextInput>:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
CommandList
Extends React.ComponentPropsWithoutRef<typeof ScrollView>:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
CommandGroup
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | - | Group heading text |
className | string | - | Additional CSS classes |
CommandItem
Extends React.ComponentPropsWithoutRef<typeof Pressable>:
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The value used for filtering |
onSelect | () => void | - | Callback when the item is selected |
CommandEmpty
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
Best Practices
- Provide an empty state: Always include
CommandEmptywith a helpful message - Use groups: Organize items with
CommandGroupand headings for scannability - Add shortcuts: Show keyboard shortcuts with
CommandShortcutfor power users - Filter by value: Set
valueonCommandItemwhen the display text differs from the filter string - Use dialog for spotlight: Wrap in
CommandDialogfor a floating command palette experience
Related Components
- Dialog - For general-purpose modals
- Select - For value selection from a list
- Combobox - For searchable selection with a trigger