Command Menu

A command menu, often triggered by ⌘ K, provides a quick way for users to navigate and perform actions across your application.

Props

Prop	Type	Description
open	boolean	Controls the visibility of the command menu.
setOpen	function	Function to update the visibility state of the menu.

Example

Live Preview

Click the button or press the keyboard shortcut to open the command menu. Built with Headless UI for full accessibility.

or press ⌘ K

import { useState } from 'react';
import CommandMenu from '@/components/CommandMenu';
import Button from '@/components/Button';

export default function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <div className="flex items-center">
        <Button onClick={() => setIsOpen(true)}>Open Command Menu</Button>
        <p className="text-sm text-slate-500 ml-4">or press <kbd className="font-sans font-semibold"><kbd className="text-lg">⌘</kbd> K</kbd></p>
      </div>
      
      <CommandMenu open={isOpen} setOpen={setIsOpen} />
    </>
  );
}