Command dialog and keyboard shortcuts palette for web apps.
- Keyboard navigation
- Build in dark/light themes
- Customizable action shortcuts with tinykeys
- Native
<dialog>element - Responsive design
- Fuzzy search with Fuse.js
npm i cmd-dialog<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cmd Dialog Example</title>
</head>
<body>
<cmd-dialog/>
<script type="module" src="./main.js"></script>
</body>import { CmdDialog } from "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"]
},
// ...
];See the docs for more details on how to use the cmd-dialog component.
Add the following script tag to your HTML file to use the cmd-dialog component from a CDN:
<script type="module" src="https://esm.run/cmd-dialog"></script><script type="module">
import CmdDialog from 'https://esm.run/cmd-dialog';
</script>- LitElement - 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.
- Icons by Lucide – licensed under the ISC License.
- The
cmd-dialogis inspired by Ninja Keys, which offers a similar command palette and keyboard shortcuts.