readme.md

cmd-dialog

A fast, keyboard-driven command dialog and shortcuts palette for web apps.

Features

• Built-in dark/light themes
• Keyboard navigation
• Customizable action shortcuts with tinykeys
• Fuzzy search with Fuse.js
• Native <dialog> element
• Responsive design

Installation

pnpm add cmd-dialog

Or from CDN:

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

Usage

<cmd-dialog placeholder="Search..." hotkey="$mod+k"></cmd-dialog>

<script type="module">
	import "cmd-dialog";

	const dialog = document.querySelector("cmd-dialog");
	dialog.actions = [
		{
			title: "Author's website",
			description: "Roman's personal website",
			url: "https://ozana.cz",
			target: "_blank",
			tags: ["homepage", "contact", "email"],
		},
	];
</script>

See the documentation for details on attributes, events, and action configuration.

Try the live demo.

Dependencies

• Lit — A simple base class for creating fast, lightweight web components.
• Fuse.js — Lightweight fuzzy-search library.
• tinykeys — A robust JavaScript library for capturing keyboard input.

Credits

• Icons by Lucide — licensed under the ISC License.
• Inspired by Ninja Keys.

License

MIT

---

Made with ♥️ by Roman Ožana