> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.
# Command
> A command palette component for keyboard-driven navigation and actions.
## Overview
The Command component provides a keyboard-centric interface for quickly finding and executing actions. It features fuzzy search, keyboard navigation, and can be used standalone or within a dialog for a command palette experience.
## Use cases
* Build command palettes (Cmd+K / Ctrl+K interfaces)
* Create searchable action menus
* Implement quick navigation interfaces
* Build fuzzy search functionality
* Provide keyboard-driven workflows
* Create global search features
## Anatomy
The Command component consists of:
* `Command` - Root container that manages search and filtering
* `Command.Dialog` - Dialog wrapper for command palette UIs
* `Command.Input` - Search input with icon
* `Command.List` - Scrollable list of filtered results
* `Command.Empty` - Empty state when no results found
* `Command.Group` - Grouped command items with heading
* `Command.Item` - Individual selectable command
* `Command.Separator` - Visual separator between groups
* `Command.Shortcut` - Keyboard shortcut display
## Props
### Command (root)
Inherits all props from the cmdk Command component.
Controlled search value. Use with `onValueChange` for controlled behavior.
Callback fired when the search value changes.
Custom filter function. Return a number between 0 and 1, where 1 is a perfect match.
Whether to filter items automatically. Set to false for custom filtering.
Additional CSS class names to apply to the command container.
### Command.Dialog
Controlled open state of the dialog.
Callback fired when the dialog open state changes.
### Command.Input
Inherits all props from the cmdk Command.Input component.
Placeholder text for the search input.
Controlled input value.
Callback fired when the input value changes.
Additional CSS class names to apply to the input.
### Command.List
Additional CSS class names to apply to the list container.
### Command.Empty
Additional CSS class names to apply to the empty state.
### Command.Group
The heading text or element for the group.
Additional CSS class names to apply to the group.
### Command.Item
The search value for this item. If not provided, children text content is used.
Callback fired when the item is selected.
When true, the item cannot be selected.
Additional keywords to match against when searching.
Additional CSS class names to apply to the item.
### Command.Separator
Additional CSS class names to apply to the separator.
### Command.Shortcut
Additional CSS class names to apply to the shortcut display.
## Usage
### Basic command menu
```jsx theme={null}
import { Command } from '@raystack/apsara';
function App() {
return (
No results found.
Calendar
Search Emoji
Calculator
Profile
Billing
Settings
);
}
```
### Command palette dialog
```jsx theme={null}
import { Command } from '@raystack/apsara';
import { useState, useEffect } from 'react';
function App() {
const [open, setOpen] = useState(false);
useEffect(() => {
const down = (e) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((open) => !open);
}
};
document.addEventListener('keydown', down);
return () => document.removeEventListener('keydown', down);
}, []);
return (
No results found.
console.log('New File')}>
New File
⌘N
console.log('New Folder')}>
New Folder
⌘⇧N
);
}
```
### With icons and shortcuts
```jsx theme={null}
import { Command } from '@raystack/apsara';
import {
FileIcon,
MagnifyingGlassIcon,
GearIcon,
PersonIcon
} from '@radix-ui/react-icons';
function App() {
return (
No results found.
New Document
⌘N
Search Files
⌘F
Profile
Settings
);
}
```
### With custom filtering
```jsx theme={null}
import { Command } from '@raystack/apsara';
import { useState } from 'react';
function App() {
const [search, setSearch] = useState('');
// Custom filter logic
const filteredItems = items.filter(item =>
item.title.toLowerCase().includes(search.toLowerCase())
);
return (
{filteredItems.length === 0 && (
No results found.
)}
{filteredItems.map((item) => (
{item.title}
))}
);
}
```
### Navigation command palette
```jsx theme={null}
import { Command } from '@raystack/apsara';
import { useRouter } from 'next/navigation';
function App() {
const router = useRouter();
const [open, setOpen] = useState(false);
const handleSelect = (callback) => {
setOpen(false);
callback();
};
return (
No pages found.
handleSelect(() => router.push('/dashboard'))}
>
Dashboard
handleSelect(() => router.push('/projects'))}
>
Projects
handleSelect(() => router.push('/team'))}
>
Team
handleSelect(() => router.push('/settings'))}
>
Settings
handleSelect(() => router.push('/profile'))}
>
Profile
);
}
```
### With keywords for better search
```jsx theme={null}
import { Command } from '@raystack/apsara';
function App() {
return (
No results found.
New File
Search
Settings
);
}
```
### Disabled items
```jsx theme={null}
import { Command } from '@raystack/apsara';
function App() {
return (
Available Feature
Coming Soon
Premium Feature (Upgrade Required)
);
}
```
## Accessibility
* Built on cmdk (Command Menu) library with full keyboard support
* Keyboard navigation:
* Arrow up/down to navigate items
* Enter to select an item
* Escape to close (when in dialog)
* Tab/Shift+Tab for natural focus flow
* Automatic filtering with fuzzy search
* Screen reader friendly with proper ARIA attributes
* Focus management handles list updates during search
* Search input automatically focused when opened
* Visual indicator shows selected/focused items
## Styling customization
Customize the command component using className props:
```jsx theme={null}
No results
Action
⌘K
```
The component uses CSS modules internally with the following base styles:
* Search input includes a magnifying glass icon
* Items have hover and selected states
* Keyboard shortcuts are right-aligned with subtle styling
* Empty state is centered with muted text
* Dialog variant has specific padding and overflow handling