Command Component

Overview

The Command component provides a command palette interface for searching and executing commands. It's commonly used for keyboard shortcuts, search functionality, and command-line interfaces within applications.

Basic Usage

import { Command } from '@/components/command'

export default function CommandExample() {
  const suggestionsItems = [
  { title: 'Create New Project', shortcut: '⌘N', description: 'Start a new project' },
  { title: 'Open Recent File', shortcut: '⌘O', description: 'Open recently accessed files' },
  { title: 'Save Current Work', shortcut: '⌘S', description: 'Save your current progress' }
];

const items = [
  {
    title: 'Quick Actions',
    childs: [
      { title: 'Create New Project', shortcut: '⌘N', description: 'Start a new project' },
      { title: 'Open Recent File', shortcut: '⌘O', description: 'Open recently accessed files' },
      { title: 'Save Current Work', shortcut: '⌘S', description: 'Save your current progress' }
    ]
  }
];
  
  return (
    <Command 
      suggestionsItems={suggestionsItems}
      items={items}
    />
  )
}

Preview:

Props

The Command component is directly re-exported from @dashflowx/core, so it uses the same props as the core component. The component accepts JSON strings or arrays for the data props.

Prop	Type	Default	Description
`suggestionsItems`	`Array \| string`	`[]`	Array of suggestion items with title and optional shortcut
`items`	`Array \| string`	`[]`	Array of grouped items with title, shortcut, and childs
`className`	`string`	`''`	Additional CSS classes for the container
`children`	`React.ReactNode`	-	Additional content to render inside the command

Data Structure

The component accepts data in two formats:

As Arrays (JavaScript)

const suggestionsItems = [
  { title: 'Calendar', shortcut: '⌘K' },
  { title: 'Search Emoji', shortcut: '⌘E' }
];

const items = [
  {
    title: 'Suggestions',
    childs: [
      { title: 'Calendar', shortcut: '⌘K' },
      { title: 'Search Emoji', shortcut: '⌘E' }
    ]
  }
];

As JSON Strings (Markdoc)

<Command 
  suggestionsItems="[{\"title\":\"Create New Project\",\"shortcut\":\"⌘N\",\"description\":\"Start a new project\"},{\"title\":\"Open Recent File\",\"shortcut\":\"⌘O\",\"description\":\"Open recently accessed files\"}]"
  items="[{\"title\":\"Quick Actions\",\"childs\":[{\"title\":\"Create New Project\",\"shortcut\":\"⌘N\",\"description\":\"Start a new project\"},{\"title\":\"Open Recent File\",\"shortcut\":\"⌘O\",\"description\":\"Open recently accessed files\"}]}]"
/>

Available Components

The Command component exports several sub-components from @dashflowx/core:

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

Component Usage

<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>
        <span>Calendar</span>
        <CommandShortcut>⌘K</CommandShortcut>
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Actions">
      <CommandItem>
        <span>New File</span>
        <CommandShortcut>⌘N</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Basic Command Palette

const suggestionsItems = [
  { title: 'New File', shortcut: '⌘N' },
  { title: 'Open File', shortcut: '⌘O' },
  { title: 'Save File', shortcut: '⌘S' }
];

const items = [
  {
    title: 'File',
    childs: [
      { title: 'New File', shortcut: '⌘N' },
      { title: 'Open File', shortcut: '⌘O' },
      { title: 'Save File', shortcut: '⌘S' }
    ]
  }
];

<Command 
  suggestionsItems={suggestionsItems}
  items={items}
/>

Preview:

Search Interface

const searchItems = [
  { title: 'Find User by Name', shortcut: '⌘U', description: 'Search for users in the system' },
  { title: 'Find File by Name', shortcut: '⌘F', description: 'Search for files and documents' },
  { title: 'Find Message Content', shortcut: '⌘M', description: 'Search through message history' }
];

const categories = [
  {
    title: 'Search & Discovery',
    childs: [
      { title: 'Find User by Name', shortcut: '⌘U', description: 'Search for users in the system' },
      { title: 'Find File by Name', shortcut: '⌘F', description: 'Search for files and documents' },
      { title: 'Find Message Content', shortcut: '⌘M', description: 'Search through message history' }
    ]
  },
  {
    title: 'Navigation',
    childs: [
      { title: 'Go to Dashboard', shortcut: '⌘D', description: 'Navigate to main dashboard' },
      { title: 'Open Settings', shortcut: '⌘,', description: 'Access application settings' },
      { title: 'View Profile', shortcut: '⌘P', description: 'Open user profile page' }
    ]
  }
];

<Command 
  suggestionsItems={searchItems}
  items={categories}
/>

Preview:

Application Commands

const appSuggestions = [
  { title: 'Switch Dark/Light Theme', shortcut: '⌘T', description: 'Toggle between dark and light mode' },
  { title: 'Show/Hide Sidebar', shortcut: '⌘B', description: 'Toggle sidebar visibility' },
  { title: 'Focus Search Bar', shortcut: '⌘K', description: 'Move focus to search input' }
];

const appCommands = [
  {
    title: 'View & Display',
    childs: [
      { title: 'Switch Dark/Light Theme', shortcut: '⌘T', description: 'Toggle between dark and light mode' },
      { title: 'Show/Hide Sidebar', shortcut: '⌘B', description: 'Toggle sidebar visibility' },
      { title: 'Enter Full Screen', shortcut: '⌘F', description: 'Maximize application window' }
    ]
  },
  {
    title: 'Edit Operations',
    childs: [
      { title: 'Undo Last Action', shortcut: '⌘Z', description: 'Reverse the last performed action' },
      { title: 'Redo Last Action', shortcut: '⌘Y', description: 'Repeat the last undone action' },
      { title: 'Cut Selection', shortcut: '⌘X', description: 'Cut selected content to clipboard' },
      { title: 'Copy Selection', shortcut: '⌘C', description: 'Copy selected content to clipboard' },
      { title: 'Paste from Clipboard', shortcut: '⌘V', description: 'Insert content from clipboard' }
    ]
  },
  {
    title: 'Help & Support',
    childs: [
      { title: 'Open Documentation', shortcut: '⌘?', description: 'View help documentation' },
      { title: 'Show Shortcuts', shortcut: '⌘/', description: 'Display keyboard shortcuts guide' },
      { title: 'About Application', shortcut: '⌘I', description: 'View application information' }
    ]
  }
];

<Command 
  suggestionsItems={appSuggestions}
  items={appCommands}
/>

Preview:

Custom Styled Command

<Command 
  suggestionsItems={suggestionsItems}
  items={items}
  className="border-2 border-blue-500 rounded-xl shadow-lg"
/>

Preview:

Common Use Cases

Code Editor Commands

const editorSuggestions = [
  { title: 'Format Document', shortcut: '⌘⇧F' },
  { title: 'Go to Line', shortcut: '⌘G' },
  { title: 'Find and Replace', shortcut: '⌘⇧H' }
];

const editorCommands = [
  {
    title: 'File',
    childs: [
      { title: 'New File', shortcut: '⌘N' },
      { title: 'Open File', shortcut: '⌘O' },
      { title: 'Save File', shortcut: '⌘S' },
      { title: 'Save As', shortcut: '⌘⇧S' }
    ]
  },
  {
    title: 'Edit',
    childs: [
      { title: 'Undo', shortcut: '⌘Z' },
      { title: 'Redo', shortcut: '⌘Y' },
      { title: 'Cut', shortcut: '⌘X' },
      { title: 'Copy', shortcut: '⌘C' },
      { title: 'Paste', shortcut: '⌘V' }
    ]
  },
  {
    title: 'View',
    childs: [
      { title: 'Toggle Terminal', shortcut: '⌘`' },
      { title: 'Toggle Sidebar', shortcut: '⌘B' },
      { title: 'Toggle Panel', shortcut: '⌘J' }
    ]
  }
];

Project Management Commands

const projectSuggestions = [
  { title: 'Create Task', shortcut: '⌘T' },
  { title: 'Create Project', shortcut: '⌘P' },
  { title: 'Search Tasks', shortcut: '⌘F' }
];

const projectCommands = [
  {
    title: 'Tasks',
    childs: [
      { title: 'Create Task', shortcut: '⌘T' },
      { title: 'Complete Task', shortcut: '⌘D' },
      { title: 'Delete Task', shortcut: '⌘⌫' }
    ]
  },
  {
    title: 'Projects',
    childs: [
      { title: 'Create Project', shortcut: '⌘P' },
      { title: 'Archive Project', shortcut: '⌘A' },
      { title: 'Delete Project', shortcut: '⌘⌫' }
    ]
  },
  {
    title: 'Team',
    childs: [
      { title: 'Invite Member', shortcut: '⌘I' },
      { title: 'View Members', shortcut: '⌘M' },
      { title: 'Manage Roles', shortcut: '⌘R' }
    ]
  }
];

E-commerce Commands

const ecommerceSuggestions = [
  { title: 'Add Product', shortcut: '⌘A' },
  { title: 'View Orders', shortcut: '⌘O' },
  { title: 'Manage Inventory', shortcut: '⌘I' }
];

const ecommerceCommands = [
  {
    title: 'Products',
    childs: [
      { title: 'Add Product', shortcut: '⌘A' },
      { title: 'Edit Product', shortcut: '⌘E' },
      { title: 'Delete Product', shortcut: '⌘⌫' }
    ]
  },
  {
    title: 'Orders',
    childs: [
      { title: 'View Orders', shortcut: '⌘O' },
      { title: 'Process Order', shortcut: '⌘P' },
      { title: 'Cancel Order', shortcut: '⌘C' }
    ]
  },
  {
    title: 'Analytics',
    childs: [
      { title: 'View Sales', shortcut: '⌘S' },
      { title: 'View Reports', shortcut: '⌘R' },
      { title: 'Export Data', shortcut: '⌘E' }
    ]
  }
];

Best Practices

1. *Clear Command Names

Use clear and descriptive command names.

// ✅ Good - Clear command names
const commands = [
  { title: 'Create New Document', shortcut: '⌘N' },
  { title: 'Save Current File', shortcut: '⌘S' }
];

// ❌ Avoid - Unclear command names
const commands = [
  { title: 'New', shortcut: '⌘N' },
  { title: 'Save', shortcut: '⌘S' }
];

2. Consistent Shortcuts

Use consistent keyboard shortcuts across your application.

// ✅ Good - Consistent shortcuts
const commands = [
  { title: 'New File', shortcut: '⌘N' },
  { title: 'New Folder', shortcut: '⌘⇧N' },
  { title: 'New Window', shortcut: '⌘⌥N' }
];

3. Logical Grouping

Group related commands together.

// ✅ Good - Logical grouping
const commands = [
  {
    title: 'File Operations',
    childs: [
      { title: 'New File', shortcut: '⌘N' },
      { title: 'Open File', shortcut: '⌘O' },
      { title: 'Save File', shortcut: '⌘S' }
    ]
  },
  {
    title: 'Edit Operations',
    childs: [
      { title: 'Undo', shortcut: '⌘Z' },
      { title: 'Redo', shortcut: '⌘Y' },
      { title: 'Cut', shortcut: '⌘X' }
    ]
  }
];

4. Accessible Shortcuts

Use standard keyboard shortcuts when possible.

// ✅ Good - Standard shortcuts
const commands = [
  { title: 'Copy', shortcut: '⌘C' },
  { title: 'Paste', shortcut: '⌘V' },
  { title: 'Undo', shortcut: '⌘Z' }
];

5. Search-Friendly

Make commands searchable and discoverable.

// ✅ Good - Searchable commands
const commands = [
  { title: 'Create New Project', shortcut: '⌘N' },
  { title: 'Open Existing Project', shortcut: '⌘O' },
  { title: 'Save Current Project', shortcut: '⌘S' }
];

Customization

Custom Styling

You can customize the command palette appearance using CSS classes:

<Command 
  suggestionsItems={suggestionsItems}
  items={items}
  className="border-2 border-purple-500 rounded-xl shadow-lg bg-purple-50"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<Command 
  suggestionsItems={suggestionsItems}
  items={items}
  className="bg-white border-gray-200"
/>

// Dark theme
<Command 
  suggestionsItems={suggestionsItems}
  items={items}
  className="bg-gray-900 border-gray-700 text-white"
/>

Size Variations

Use different sizes for different emphasis levels:

// Small command palette
<Command 
  suggestionsItems={suggestionsItems}
  items={items}
  className="w-64"
/>

// Large command palette
<Command 
  suggestionsItems={suggestionsItems}
  items={items}
  className="w-full max-w-2xl"
/>

Advanced Usage

Dynamic Commands

Load commands dynamically based on context:

const [commands, setCommands] = useState([]);

useEffect(() => {
  // Load commands based on current context
  const contextCommands = getCommandsForContext(currentContext);
  setCommands(contextCommands);
}, [currentContext]);

Command Execution

Handle command execution:

const handleCommandSelect = (command: string) => {
  switch (command) {
    case 'New File':
      createNewFile();
      break;
    case 'Open File':
      openFileDialog();
      break;
    case 'Save File':
      saveCurrentFile();
      break;
    default:
      console.log('Unknown command:', command);
  }
};

Search Functionality

Implement search functionality:

const [searchTerm, setSearchTerm] = useState('');

const filteredCommands = useMemo(() => {
  if (!searchTerm) return commands;
  
  return commands.filter(command => 
    command.title.toLowerCase().includes(searchTerm.toLowerCase())
  );
}, [commands, searchTerm]);

Dialog: For modal command palettes
Input: For search input
List: For command lists
Shortcut: For keyboard shortcuts
Search: For search functionality

API Reference

For the complete API reference and advanced usage patterns, see the Command API documentation.

Overview

Basic Usage

Props

Data Structure

As Arrays (JavaScript)

As JSON Strings (Markdoc)

Available Components

Component Usage

Examples

Basic Command Palette

Search Interface

Application Commands

Custom Styled Command

Common Use Cases

Code Editor Commands

Project Management Commands

E-commerce Commands

Best Practices

1. *Clear Command Names

2. Consistent Shortcuts

3. Logical Grouping

4. Accessible Shortcuts

5. Search-Friendly

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Commands

Command Execution

Search Functionality

Related Components

API Reference