Command Palette — RenDS Components

About

Overview

Command palettes turn your app into a keyboard-first surface. Bind ⌘+K globally and let users type to find any action — navigation, settings, recently-used items.

Live

Demo

Press Ctrl+K — the palette's default global shortcut — or use the button, then type to filter.

<ren-command id="cmd">
  <dialog class="ren-command" aria-label="Command palette">
    <div class="ren-command-input-wrapper">
      <input class="ren-command-input" type="text" placeholder="Type a command…" aria-label="Search commands">
      <kbd class="ren-command-kbd">esc</kbd>
    </div>

    <div class="ren-command-list">
      <div class="ren-command-group">
        <div class="ren-command-group-heading">Navigation</div>
        <button class="ren-command-item" type="button" data-value="go-projects" data-keywords="projects workspace">
          <span class="ren-command-item-content">
            <span class="ren-command-item-title">Go to projects</span>
            <span class="ren-command-item-description">Every project you can access</span>
          </span>
        </button>
      </div>
    </div>

    <div class="ren-command-empty" hidden>No commands found</div>
  </dialog>
</ren-command>

<script type="module" src="rends/components/patterns/ren-command/ren-command.js"></script>
<script>
  // ⌘K / Ctrl+K is built in; a visible trigger is your job.
  openBtn.addEventListener('click', () => document.getElementById('cmd').open());
</script>

Reference

API

Class	Effect
`.ren-command`	On the `<dialog>` inside `<ren-command>`. Opens centered via `showModal()`, with a dimmed backdrop.
`.ren-command-input`	The search input. A real `<input type="text">` with an accessible name.
`.ren-command-list`	The scrolling results container.
`.ren-command-group` / `-group-heading`	Optional grouping. The component sets `data-empty` on a group whose items are all filtered out.
`.ren-command-item`	One command, as a `<button>`. `data-value` identifies it; `data-keywords` adds extra matching terms; `data-action` names a handler registered with `registerAction()`.
`.ren-command-empty`	Shown when the filter matches nothing. Start it `hidden`.

Attributes, methods and events

Name	Type	Default	Notes
`data-shortcut`	"ctrl+k" \| "meta+k" \| …	"ctrl+k"	Global key combo that opens the palette. Bind only one.
`open()` / `close()`	method	—	Open or close the palette from your own trigger.
`registerAction(id, fn)`	method	—	Runs `fn` when an item with a matching `data-action` is selected.
`ren-command-select`	event	—	An item was chosen. `{ item, value, action }`.

Inclusive by default

Accessibility

Rendered as a real <dialog> opened with showModal(), so the focus trap, Esc, and the inert background all come from the browser.
Up / Down navigate, Enter runs the command, Esc closes. The component injects a role="status" live region that announces the result count on every keystroke.
Always include keyboard fallbacks for users who can't reach the ⌘K shortcut — every command should also be reachable from a visible trigger or a menu.