50 components available

Command K

June 2024
Login to access the code
A sleek command palette UI with real-time filtering, grouped actions, and stylized keyboard hints — ideal for global app navigation or power-user shortcuts.
command
K
Actions
Suggestions
Open application
Show in finder
Add to favourites
General
Mark as complete
Playground
() => {
  const commands = {
    Suggestions: [
      {
        name: 'Open application',
        icon: 'https://reverseui.com/images/command-k/window.svg',
      },
      {
        name: 'Show in finder',
        icon: 'https://reverseui.com/images/command-k/mac-finder.svg',
      },
      {
        name: 'Add to favourites',
        icon: 'https://reverseui.com/images/command-k/star.svg',
      },
    ],
    General: [
      {
        name: 'Mark as complete',
        icon: 'https://reverseui.com/images/command-k/tick.svg',
      },
    ],
  };

  return <CommandK commands={commands} />;
};

Installation

Whoops, hang on for a sec
You don't have access to view this resource

API Props

PropTypeDefault
commands
[category: string]: { name: string; icon: JSX.Element | string; }[]
{}