Composite
Command Palette Requires JS
Searchable command launcher (⌘K). Fuzzy matching, keyboard-first, grouped by category. The fastest way for power users to do anything in the app.
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
<ren-command id="cmd">
<input slot="input" placeholder="Type a command…">
<ren-command-group label="Recent">
<ren-command-item value="open-project">Open project…</ren-command-item>
</ren-command-group>
<ren-command-group label="Settings">
<ren-command-item value="theme">Toggle theme</ren-command-item>
</ren-command-group>
</ren-command>Reference
API
| Class | Effect |
|---|---|
.ren-command | The dialog wrapper. Opens centered, dimmed backdrop. |
.ren-command-input | The search input. |
.ren-command-list | The filtered results. |
.ren-command-group / -group-label | Optional grouping of commands. |
.ren-command-item | One command. data-value identifies it; data-keywords adds extra matching terms. |
Inclusive by default
Accessibility
- Implements the WAI-ARIA Combobox + Listbox pattern.
- Up / Down navigate, Enter runs the command, Esc closes.
- Always include keyboard fallbacks for users who can't reach the ⌘K shortcut — every command should also be reachable from a menu.