Command

Fast, composable, unstyled command menu for React.

Import

import { Command } from '@akitectio/aki-ui'

Basic Usage

📁 New File
📂 New Folder
🔍 Search Files
⚙️ Settings
const [value, setValue] = useState('');

<Command className="rounded-lg border shadow-md">
  <div className="p-2">
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type a command or search..."
      className="w-full px-3 py-2 text-sm border rounded"
    />
  </div>
  <div className="p-2 border-t">
    <div className="space-y-1">
      <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
        📁 New File
      </div>
      <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
        📂 New Folder
      </div>
      <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
        🔍 Search Files
      </div>
      <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
        ⚙️ Settings
      </div>
    </div>
  </div>
</Command>

With Groups

Suggestions
📁 New File
📂 New Folder
Settings
👤 Profile
🔔 Notifications
🎨 Theme
<Command className="rounded-lg border shadow-md">
  <div className="p-2">
    <input
      placeholder="Type a command or search..."
      className="w-full px-3 py-2 text-sm border rounded"
    />
  </div>
  <div className="p-2 border-t">
    <div className="space-y-3">
      <div>
        <div className="px-2 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
          Suggestions
        </div>
        <div className="space-y-1">
          <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
            📁 New File
          </div>
          <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
            📂 New Folder
          </div>
        </div>
      </div>
      <div>
        <div className="px-2 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
          Settings
        </div>
        <div className="space-y-1">
          <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
            👤 Profile
          </div>
          <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
            🔔 Notifications
          </div>
          <div className="px-2 py-1.5 text-sm rounded hover:bg-gray-100 cursor-pointer">
            🎨 Theme
          </div>
        </div>
      </div>
    </div>
  </div>
</Command>