Command Bar 🐝

⌘K command bar web component

• 🚀 Fast, efficient, keyboard driven UX
• 🍦 Vanilla JS, native web component that works everywhere
• 😌 Opinionated: it doesn't do much, but what it does is very easy to use
• 👌 Fully typed and tested

Installation

From a CDN:

import { CommandBar } from "https://esm.sh/gh/andreasphil/command-bar@<tag>";

With a package manager:

npm i github:andreasphil/command-bar#<tag>

Usage

Import the styling for the command bar in your app:

@import "@andreasphil/design-system/style.css" layer(theme);
@import "@andreasphil/command-bar/style.css";

Then import the component and define it:

import { CommandBar } from "@andreasphil/command-bar";

CommandBar.define();

After that, the component will be available in the HTML:

<command-bar></command-bar>

If a command bar is present in the DOM, you can access it globally via CommandBar.instance. This will provide you with methods for registering and removing commands, as well as opening the bar manually:

import { CommandBar } from "@andreasphil/command-bar";

// This will be returned by the method for registering commands. We can use
// this to clean up commands only needed by specific components/views when
// the user navigates away from those.
let cleanup;

cleanup = CommandBar.instance.registerCommand({
  id: "a_command",
  name: "A command",
  // See the Command type for all available options
});

API

See commandBar.d.ts for all available methods and docs.

Development

This library is built with esbuild. Packages are managed by pnpm. Tests are powered by Node.js' test runner. The following commands are available:

pnpm dev          # Build the library and serve index.html in watch mode
pnpm test         # Run tests once
pnpm test:watch   # Run tests in watch mode
pnpm build        # Typecheck, emit declarations and bundle

For a demo, open index.html in a browser.

Credits

This library uses a number of open source packages listed in package.json, as well as icons from Lucide.

Thanks 🙏