cmd-dialog

Command <dialog>

Command dialog and keyboard shortcuts palette for web apps.

Features

• Keyboard navigation4
• Build in dark/light themes
• Customizable action shortcuts with hotkeys.js
• Responsive design
• Native <dialog> element
• Fuzzy search with Fuse.js

Install

npm i cmd-dialog

From CDN

<script type="module" src="https://esm.run/cmd-dialog"></script>

or inside module script

<script type="module">
  import cmdDialog from 'https://esm.run/cmd-dialog';
</script>

Usage

Attributes

• theme - Theme of the dialog. Possible values: light or dark. Default value is taken from browser preference.
• hotkey - List of hotkeys. Default value: ctrl+k,cmd+k.
• placeholder - Placeholder text for the search input. Default value: Type a command or search....
• note - The note in the footer of the dialog box. Default value show number of options.

Credits

• LitElement - A simple base class for creating fast, lightweight web components.
• Fuse.js - Lightweight fuzzy-search library.
• hotkeys.js - A robust Javascript library for capturing keyboard input.
• Ninja Keys - Keyboard shortcuts for any web application.