Trapdoor Menu
Press Menu and the page swings down on its hinge like a trapdoor, showing the menu underneath: links rise as the edge passes them, an image follows your pointer. Closing replays it backwards. No GSAP.
View codeCommand Palette
A ⌘K palette in a real dialog: results filter as you type, matched letters are underlined and a highlight slides between them.
Navigation
No dependencies
commandsearchkeyboarddialog
Added Jan 2026
With your AI
Just ask.
Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.
Add a Kodza Command Palette on ⌘K to my React app.
Not plugged in yet?
Also in Codex, Cursor and VS Code.
claude mcp add -t http kodza https://kodza.dev/api/mcp
<div class="kodza-command">
<button class="kodza-command__trigger" type="button" aria-haspopup="dialog">
<svg class="kodza-command__icon" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span class="kodza-command__placeholder">Search components</span>
<kbd class="kodza-command__kbd kodza-command__shortcut">⌘K</kbd>
</button>
<dialog class="kodza-command__dialog" aria-label="Command palette">
<div class="kodza-command__search">
<svg class="kodza-command__icon" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="m10.5 10.5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<input class="kodza-command__input" type="text" placeholder="Type a command or search…" aria-label="Search commands" autocomplete="off" spellcheck="false">
<kbd class="kodza-command__kbd">esc</kbd>
</div>
<div class="kodza-command__body">
<div class="kodza-command__list" role="listbox" aria-label="Results">
<div class="kodza-command__group" role="group" aria-label="Components">
<p class="kodza-command__heading" aria-hidden="true">Components</p>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Fill Button</span></div>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Scramble Link</span></div>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Pricing Plans</span></div>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Sticky Cards</span></div>
</div>
<div class="kodza-command__group" role="group" aria-label="Actions">
<p class="kodza-command__heading" aria-hidden="true">Actions</p>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Copy the code</span><kbd class="kodza-command__kbd">⌘C</kbd></div>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Toggle dark mode</span></div>
<div class="kodza-command__option" role="option"><span class="kodza-command__text">Deploy on a Friday</span><kbd class="kodza-command__kbd">brave</kbd></div>
</div>
</div>
<p class="kodza-command__empty" hidden>Nothing found. Not even a bug.</p>
</div>
<div class="kodza-command__footer" aria-hidden="true">
<span><kbd class="kodza-command__kbd">↑</kbd><kbd class="kodza-command__kbd">↓</kbd> to move</span>
<span><kbd class="kodza-command__kbd">↵</kbd> to pick</span>
</div>
</dialog>
</div>/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Command Palette
A ⌘K (Ctrl K) search box in a modal dialog: results filter as you type, matched letters
are underlined, groups with nothing left disappear, and a highlight slides between results.
Arrow keys to move, Enter to pick, Escape or a click outside to leave.
Everything is tuned with the --kz-cmdk-* variables. */
.kodza-command {
--kz-cmdk-bg: #ffffff;
--kz-cmdk-fg: #0a0a0a;
--kz-cmdk-muted: rgba(10, 10, 10, 0.58);
--kz-cmdk-border: rgba(10, 10, 10, 0.1);
--kz-cmdk-soft: rgba(10, 10, 10, 0.06);
--kz-cmdk-backdrop: rgba(10, 10, 10, 0.32);
--kz-cmdk-shadow: 0 30px 70px -24px rgba(10, 10, 10, 0.45);
--kz-cmdk-width: 560px;
--kz-cmdk-top: 14vh;
--kz-cmdk-duration: 0.28s;
--kz-cmdk-ease: cubic-bezier(0.22, 1, 0.36, 1);
--kz-cmdk-mono: ui-monospace, "SF Mono", Menlo, monospace;
display: inline-block;
color: var(--kz-cmdk-fg);
}
.kodza-command__trigger {
display: inline-flex;
align-items: center;
gap: 10px;
width: 280px;
max-width: 100%;
height: 40px;
padding: 0 8px 0 14px;
border: 0;
border-radius: 999px;
background: var(--kz-cmdk-bg);
box-shadow: inset 0 0 0 1px var(--kz-cmdk-border);
color: var(--kz-cmdk-muted);
font: inherit;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.25s ease, color 0.25s ease;
}
.kodza-command__trigger:hover {
box-shadow: inset 0 0 0 1px var(--kz-cmdk-muted);
color: var(--kz-cmdk-fg);
}
.kodza-command__trigger:focus-visible {
outline: 2px solid var(--kz-cmdk-fg);
outline-offset: 2px;
}
.kodza-command__placeholder {
flex: 1;
text-align: left;
}
.kodza-command__icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.kodza-command__kbd {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 6px;
background: var(--kz-cmdk-soft);
color: var(--kz-cmdk-muted);
font-family: var(--kz-cmdk-mono);
font-size: 11px;
line-height: 1;
}
/* The dialog: it drops in a little, over a fading backdrop */
.kodza-command__dialog {
width: min(var(--kz-cmdk-width), calc(100% - 32px));
max-width: none;
max-height: none;
margin: var(--kz-cmdk-top) auto auto;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 16px;
background: var(--kz-cmdk-bg);
box-shadow: 0 0 0 1px var(--kz-cmdk-border), var(--kz-cmdk-shadow);
color: var(--kz-cmdk-fg);
font: inherit;
opacity: 0;
transform: translateY(-10px) scale(0.98);
transition: opacity var(--kz-cmdk-duration) ease, transform var(--kz-cmdk-duration) var(--kz-cmdk-ease);
}
.kodza-command__dialog::backdrop {
background: transparent;
transition: background-color var(--kz-cmdk-duration) ease;
}
.kodza-command__dialog.is-open {
opacity: 1;
transform: none;
}
.kodza-command__dialog.is-open::backdrop {
background: var(--kz-cmdk-backdrop);
}
.kodza-command__search {
display: flex;
align-items: center;
gap: 12px;
height: 56px;
padding: 0 14px 0 18px;
border-bottom: 1px solid var(--kz-cmdk-border);
color: var(--kz-cmdk-muted);
}
.kodza-command__input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: none;
color: var(--kz-cmdk-fg);
font: inherit;
font-size: 16px;
outline: none;
}
.kodza-command__input::placeholder {
color: var(--kz-cmdk-muted);
}
/* The results area: its height follows the results instead of jumping */
.kodza-command__body {
overflow: hidden;
}
.kodza-command__list {
position: relative;
max-height: min(340px, 50vh);
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
}
.kodza-command__group[hidden] {
display: none;
}
.kodza-command__heading {
margin: 0;
padding: 10px 12px 6px;
font-family: var(--kz-cmdk-mono);
font-size: 11px;
color: var(--kz-cmdk-muted);
}
.kodza-command__highlight {
position: absolute;
top: 0;
right: 6px;
left: 6px;
height: var(--kz-hl-h, 40px);
border-radius: 10px;
background: var(--kz-cmdk-soft);
opacity: var(--kz-hl-on, 0);
transform: translateY(var(--kz-hl-y, 0));
pointer-events: none;
}
.kodza-command__dialog.is-open .kodza-command__highlight {
transition: transform 0.2s var(--kz-cmdk-ease), opacity 0.15s ease;
}
.kodza-command__option {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 40px;
padding: 0 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.kodza-command__option[hidden] {
display: none;
}
.kodza-command__text mark {
background: none;
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
}
.kodza-command__empty {
margin: 0;
padding: 36px 20px 40px;
color: var(--kz-cmdk-muted);
font-size: 14px;
text-align: center;
}
.kodza-command__empty:not([hidden]) {
animation: kodza-command-in 0.35s var(--kz-cmdk-ease) both;
}
@keyframes kodza-command-in {
from {
opacity: 0;
transform: translateY(6px);
}
}
.kodza-command__footer {
display: flex;
gap: 18px;
padding: 10px 16px;
border-top: 1px solid var(--kz-cmdk-border);
color: var(--kz-cmdk-muted);
font-family: var(--kz-cmdk-mono);
font-size: 11px;
}
.kodza-command__footer span {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (prefers-reduced-motion: reduce) {
.kodza-command__trigger,
.kodza-command__dialog,
.kodza-command__dialog::backdrop,
.kodza-command__dialog.is-open .kodza-command__highlight {
transition-duration: 0.01ms !important;
}
.kodza-command__empty:not([hidden]) {
animation: none;
}
}
/* Theming example — on a dark background:
.dark-section .kodza-command {
--kz-cmdk-bg: #161616;
--kz-cmdk-fg: #f2f2f0;
--kz-cmdk-muted: rgba(242, 242, 240, 0.52);
--kz-cmdk-border: rgba(255, 255, 255, 0.12);
--kz-cmdk-soft: rgba(255, 255, 255, 0.08);
--kz-cmdk-backdrop: rgba(0, 0, 0, 0.55);
--kz-cmdk-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
}
*/
/* kodza-guard 93a236f619a2 — generated by Kodza, do not edit.
Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
component. :not(#_) is always true and weighs as much as an id, so these lines win over
theme rules made of classes and tags. Customise the component through its --kz-* variables. */
/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */
:where(.kodza-command__trigger):not(#_) {
outline: revert;
outline-offset: revert;
}
/* What the browser gives, on everything the component leaves to it */
.kodza-command:not(#_),
.kodza-command__placeholder:not(#_),
.kodza-command__search:not(#_),
.kodza-command__body:not(#_),
.kodza-command__list:not(#_),
.kodza-command__highlight:not(#_),
.kodza-command__group:not(#_),
.kodza-command__option:not(#_),
.kodza-command__text:not(#_),
.kodza-command__footer:not(#_),
.kodza-command__footer span:where(:not([class*="kodza-"])):not(#_) {
box-sizing: revert;
}
.kodza-command__trigger:not(#_) {
margin: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
appearance: revert;
max-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
white-space: revert;
min-height: revert;
}
.kodza-command__icon:not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-command__kbd:not(#_) {
border: revert;
margin: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-weight: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-command__dialog:not(#_) {
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
outline-offset: revert;
appearance: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-command__input:not(#_) {
margin: revert;
border-radius: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
white-space: revert;
min-height: revert;
}
.kodza-command__heading:not(#_) {
border: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-command__empty:not(#_) {
border: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-command__icon:not(#_):where(:not([hidden])),
.kodza-command__dialog:not(#_):where(:not([hidden])),
.kodza-command__input:not(#_):where(:not([hidden])),
.kodza-command__heading:not(#_):where(:not([hidden])),
.kodza-command__empty:not(#_):where(:not([hidden])) {
display: revert;
}
.kodza-command__icon:not(#_):where([hidden]),
.kodza-command__dialog:not(#_):where([hidden]),
.kodza-command__input:not(#_):where([hidden]),
.kodza-command__heading:not(#_):where([hidden]),
.kodza-command__empty:not(#_):where([hidden]) {
display: none;
}
/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */
.kodza-command__trigger:not(#_) {
display: inline-flex;
align-items: center;
gap: 10px;
width: 280px;
max-width: 100%;
height: 40px;
padding: 0 8px 0 14px;
border: 0;
border-radius: 999px;
background: var(--kz-cmdk-bg);
box-shadow: inset 0 0 0 1px var(--kz-cmdk-border);
color: var(--kz-cmdk-muted);
font: inherit;
font-size: 15px;
cursor: pointer;
transition: box-shadow 0.25s ease, color 0.25s ease;
}
.kodza-command__trigger:hover:not(#_) {
box-shadow: inset 0 0 0 1px var(--kz-cmdk-muted);
color: var(--kz-cmdk-fg);
}
.kodza-command__trigger:focus-visible:not(#_) {
outline: 2px solid var(--kz-cmdk-fg);
outline-offset: 2px;
}
.kodza-command__kbd:not(#_) {
display: inline-grid;
padding: 0 6px;
border-radius: 6px;
background: var(--kz-cmdk-soft);
color: var(--kz-cmdk-muted);
font-family: var(--kz-cmdk-mono);
font-size: 11px;
line-height: 1;
}
.kodza-command__dialog:not(#_) {
max-width: none;
max-height: none;
margin: var(--kz-cmdk-top) auto auto;
padding: 0;
border: 0;
border-radius: 16px;
background: var(--kz-cmdk-bg);
box-shadow: 0 0 0 1px var(--kz-cmdk-border), var(--kz-cmdk-shadow);
color: var(--kz-cmdk-fg);
font: inherit;
transition: opacity var(--kz-cmdk-duration) ease, transform var(--kz-cmdk-duration) var(--kz-cmdk-ease);
}
.kodza-command__input:not(#_) {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: none;
color: var(--kz-cmdk-fg);
font: inherit;
font-size: 16px;
outline: none;
}
.kodza-command__input:not(#_)::placeholder {
color: var(--kz-cmdk-muted);
}
.kodza-command__heading:not(#_) {
margin: 0;
padding: 10px 12px 6px;
font-family: var(--kz-cmdk-mono);
font-size: 11px;
color: var(--kz-cmdk-muted);
}
.kodza-command__empty:not(#_) {
margin: 0;
padding: 36px 20px 40px;
color: var(--kz-cmdk-muted);
font-size: 14px;
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.kodza-command__trigger:not(#_) {
transition-duration: 0.01ms !important;
}
}
@media (prefers-reduced-motion: reduce) {
.kodza-command__dialog:not(#_) {
transition-duration: 0.01ms !important;
}
}// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Command Palette
// Opens the dialog (button or ⌘K / Ctrl K, for the first palette of the page), filters the
// options as you type (letters in order, not necessarily side by side), keeps one option
// active for the arrow keys, and fires "kodza:command" with { value } when one is picked.
(() => {
const SELECTOR = '.kodza-command';
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// The page behind stays put while it is open: a wheel or a swipe only scrolls what can
// scroll inside, under the pointer. Listening only while open costs nothing the rest of the time.
const holdPage = (layer, signal) => {
const inside = (target, x, y, dy) => {
for (let el = target; el instanceof Element && layer.contains(el); el = el.parentElement) {
const box = el.getBoundingClientRect();
if (x < box.left || x > box.right || y < box.top || y > box.bottom) continue;
if (!/(auto|scroll)/.test(getComputedStyle(el).overflowY) || el.scrollHeight <= el.clientHeight + 1) continue;
if (dy > 0 ? el.scrollTop + el.clientHeight < el.scrollHeight - 1 : el.scrollTop > 0) return true;
}
return false;
};
let last = 0;
const wheel = (event) => !inside(event.target, event.clientX, event.clientY, event.deltaY) && event.preventDefault();
const touchstart = (event) => (last = event.touches[0].clientY);
const touchmove = (event) => {
const touch = event.touches[0];
const dy = last - touch.clientY;
last = touch.clientY;
if (!inside(event.target, touch.clientX, touch.clientY, dy)) event.preventDefault();
};
const hold = (on) => {
const method = on ? 'addEventListener' : 'removeEventListener';
document[method]('wheel', wheel, { passive: false });
document[method]('touchstart', touchstart, { passive: true });
document[method]('touchmove', touchmove, { passive: false });
};
const observer = new MutationObserver(() => hold(layer.open));
observer.observe(layer, { attributes: true, attributeFilter: ['open'] });
// Stopped while open: the page is let go
signal.addEventListener('abort', () => {
observer.disconnect();
hold(false);
});
};
const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
let uid = 0;
let shortcutTaken = false;
// The positions of the query's letters in the text, in order, or null
const match = (text, query) => {
const hits = [];
let from = 0;
for (const char of query) {
const at = text.indexOf(char, from);
if (at < 0) return null;
hits.push(at);
from = at + 1;
}
return hits;
};
// One instance. Everything it starts is tied to `signal`, so kodza:destroy stops it all
function mount(root, signal) {
const trigger = root.querySelector('.kodza-command__trigger');
const dialog = root.querySelector('.kodza-command__dialog');
holdPage(dialog, signal);
const input = root.querySelector('.kodza-command__input');
const list = root.querySelector('.kodza-command__list');
const empty = root.querySelector('.kodza-command__empty');
if (!trigger || !dialog || !input || !list) return;
const groups = [...list.querySelectorAll('.kodza-command__group')];
const options = [...list.querySelectorAll('.kodza-command__option')];
const labels = new Map(options.map((option) => [option, option.querySelector('.kodza-command__text') || option]));
const texts = new Map(options.map((option) => [option, labels.get(option).textContent]));
const duration = reduceMotion ? 0 : parseFloat(getComputedStyle(root).getPropertyValue('--kz-cmdk-duration')) * 1000 || 280;
// ids for the combobox wiring, made here so the copied HTML has none
const prefix = `kodza-command-${++uid}`;
list.id = `${prefix}-list`;
options.forEach((option, i) => (option.id = `${prefix}-option-${i}`));
input.setAttribute('role', 'combobox');
input.setAttribute('aria-expanded', 'true');
input.setAttribute('aria-controls', list.id);
input.setAttribute('aria-autocomplete', 'list');
if (!isMac) root.querySelectorAll('.kodza-command__shortcut').forEach((kbd) => (kbd.textContent = 'Ctrl K'));
const highlight = document.createElement('span');
highlight.className = 'kodza-command__highlight';
highlight.setAttribute('aria-hidden', 'true');
list.prepend(highlight);
let active = null;
const visible = () => options.filter((option) => !option.hidden);
const activate = (option, scroll = true) => {
options.forEach((other) => other.setAttribute('aria-selected', String(other === option)));
active = option;
if (!option) {
input.removeAttribute('aria-activedescendant');
list.style.setProperty('--kz-hl-on', 0);
return;
}
input.setAttribute('aria-activedescendant', option.id);
list.style.setProperty('--kz-hl-y', `${option.offsetTop}px`);
list.style.setProperty('--kz-hl-h', `${option.offsetHeight}px`);
list.style.setProperty('--kz-hl-on', 1);
if (scroll) option.scrollIntoView({ block: 'nearest' });
};
const body = root.querySelector('.kodza-command__body');
let resize = null;
const filter = (animate = false) => {
const from = body && animate ? body.offsetHeight : 0;
const query = input.value.trim().toLowerCase();
options.forEach((option) => {
const text = texts.get(option);
const hits = query ? match(text.toLowerCase(), query) : [];
option.hidden = hits === null;
// Underline the matched letters
const label = labels.get(option);
if (!hits || !hits.length) {
label.textContent = text;
return;
}
const parts = [];
let last = 0;
hits.forEach((at) => {
if (at > last) parts.push(text.slice(last, at));
const mark = document.createElement('mark');
mark.textContent = text[at];
parts.push(mark);
last = at + 1;
});
parts.push(text.slice(last));
label.replaceChildren(...parts);
});
groups.forEach((group) => (group.hidden = !group.querySelector('.kodza-command__option:not([hidden])')));
const shown = visible();
if (empty) empty.hidden = shown.length > 0;
list.hidden = !shown.length;
activate(shown[0] || null);
// The box grows or shrinks to the new results instead of jumping
if (body && animate && !reduceMotion) {
resize?.cancel();
const to = body.offsetHeight;
if (Math.abs(to - from) > 1) resize = body.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration: 240, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
}
};
let closing = 0;
const open = () => {
// Reopened while it was closing: it simply comes back
if (dialog.open) {
clearTimeout(closing);
dialog.classList.add('is-open');
input.focus();
return;
}
input.value = '';
filter();
dialog.showModal();
requestAnimationFrame(() => {
dialog.classList.add('is-open');
activate(visible()[0] || null, false);
});
input.focus();
};
const close = () => {
if (!dialog.open || !dialog.classList.contains('is-open')) return;
dialog.classList.remove('is-open');
clearTimeout(closing);
closing = setTimeout(() => {
dialog.close();
trigger.focus({ preventScroll: true });
}, duration);
};
const pick = (option) => {
if (!option) return;
root.dispatchEvent(new CustomEvent('kodza:command', { detail: { value: texts.get(option) }, bubbles: true }));
close();
};
trigger.addEventListener('click', open, { signal });
input.addEventListener('input', () => filter(true), { signal });
input.addEventListener('keydown', (event) => {
const shown = visible();
const index = shown.indexOf(active);
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
event.preventDefault();
if (shown.length) activate(shown[(index + (event.key === 'ArrowDown' ? 1 : -1) + shown.length) % shown.length]);
} else if (event.key === 'Enter') {
event.preventDefault();
pick(active);
}
}, { signal });
options.forEach((option) => {
option.addEventListener('pointermove', () => active !== option && activate(option, false), { signal });
option.addEventListener('click', () => pick(option), { signal });
});
// Escape and clicks on the backdrop close it, with the animation
dialog.addEventListener('cancel', (event) => {
event.preventDefault();
close();
}, { signal });
dialog.addEventListener('click', (event) => {
const box = dialog.getBoundingClientRect();
const inside = event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom;
if (!inside) close();
}, { signal });
if (!shortcutTaken) {
shortcutTaken = true;
document.addEventListener('keydown', (event) => {
if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
dialog.open ? close() : open();
}
}, { signal });
// Stopped, it hands the shortcut to the next palette started
signal.addEventListener('abort', () => (shortcutTaken = false));
}
// Stopped while open: the page is released at once
signal.addEventListener('abort', () => {
clearTimeout(closing);
if (dialog.open) dialog.close();
});
}
// Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
// event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
// markup back. For themes and apps that swap content without a page load.
const instances = new WeakMap();
const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
const init = (scope) => find(scope).forEach((root) => {
if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
const controller = new AbortController();
instances.set(root, { controller, html: root.innerHTML, attrs: [...root.attributes].map((a) => [a.name, a.value]) });
mount(root, controller.signal);
root.classList.add('is-ready');
});
const destroy = (scope) => find(scope).forEach((root) => {
const instance = instances.get(root);
if (!instance) return;
instances.delete(root);
instance.controller.abort();
[...root.attributes].forEach((a) => root.removeAttribute(a.name));
instance.attrs.forEach(([name, value]) => root.setAttribute(name, value));
root.innerHTML = instance.html;
});
document.addEventListener('kodza:init', (event) => init(event.detail?.root));
document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
init();
// Loaded in <head>, the script runs before the markup exists: once more when it is parsed
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();'use client';
// Kodza — Command Palette, for React. From https://kodza.dev/components/command-palette/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: command-palette.css and command-palette.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './command-palette.css';
export type CommandPaletteProps = Omit<ComponentPropsWithoutRef<'div'>, "children" | "vars" | "onCommand"> & {
/** Settings, as CSS variables on the root */
vars?: {
/** default: #ffffff */
"--kz-cmdk-bg"?: string | number;
/** default: #0a0a0a */
"--kz-cmdk-fg"?: string | number;
/** default: rgba(10, 10, 10, 0.58) */
"--kz-cmdk-muted"?: string | number;
/** default: rgba(10, 10, 10, 0.1) */
"--kz-cmdk-border"?: string | number;
/** default: rgba(10, 10, 10, 0.06) */
"--kz-cmdk-soft"?: string | number;
/** default: rgba(10, 10, 10, 0.32) */
"--kz-cmdk-backdrop"?: string | number;
/** default: 0 30px 70px -24px rgba(10, 10, 10, 0.45) */
"--kz-cmdk-shadow"?: string | number;
/** default: 560px */
"--kz-cmdk-width"?: string | number;
/** default: 14vh */
"--kz-cmdk-top"?: string | number;
/** default: 0.28s */
"--kz-cmdk-duration"?: string | number;
/** default: cubic-bezier(0.22, 1, 0.36, 1) */
"--kz-cmdk-ease"?: string | number;
/** default: ui-monospace, "SF Mono", Menlo, monospace */
"--kz-cmdk-mono"?: string | number;
};
/** "kodza:command", fired by the script (bubbles from the root) */
onCommand?: (event: CustomEvent) => void;
className?: string;
};
export function CommandPalette({ vars, onCommand, className, style, ...rest }: CommandPaletteProps) {
const ref = useRef<ComponentRef<'div'>>(null);
const classes = ["kodza-command", className].filter(Boolean).join(' ');
// Everything the markup is made of: when it changes, React gets a fresh element (see the top)
const key = JSON.stringify([classes, vars, style, rest]);
// Starts the script on this element once React has rendered it, stops it when it goes
useEffect(() => {
const root = ref.current;
let live = true;
// @ts-ignore: a plain script, no types to find
import('./command-palette.js').then(() => {
if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
});
return () => {
live = false;
document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
};
}, [key]);
useEffect(() => {
const root = ref.current;
if (!root || !onCommand) return;
const listener = (event: Event) => onCommand(event as CustomEvent);
root.addEventListener("kodza:command", listener);
return () => root.removeEventListener("kodza:command", listener);
}, [onCommand, key]);
return (
<div key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
<button className="kodza-command__trigger" type="button" aria-haspopup="dialog">
<svg className="kodza-command__icon" viewBox="0 0 16 16" aria-hidden="true">
<circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" strokeWidth="1.5" />
<path d="m10.5 10.5 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
</svg>
{' '}
<span className="kodza-command__placeholder">Search components</span>
{' '}
<kbd className="kodza-command__kbd kodza-command__shortcut">⌘K</kbd>
</button>
<dialog className="kodza-command__dialog" aria-label="Command palette">
<div className="kodza-command__search">
<svg className="kodza-command__icon" viewBox="0 0 16 16" aria-hidden="true">
<circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" strokeWidth="1.5" />
<path d="m10.5 10.5 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
</svg>
{' '}
<input className="kodza-command__input" type="text" placeholder="Type a command or search…" aria-label="Search commands" autoComplete="off" spellCheck="false" />
{' '}
<kbd className="kodza-command__kbd">esc</kbd>
</div>
<div className="kodza-command__body">
<div className="kodza-command__list" role="listbox" aria-label="Results">
<div className="kodza-command__group" role="group" aria-label="Components">
<p className="kodza-command__heading" aria-hidden="true">Components</p>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Fill Button</span>
</div>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Scramble Link</span>
</div>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Pricing Plans</span>
</div>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Sticky Cards</span>
</div>
</div>
<div className="kodza-command__group" role="group" aria-label="Actions">
<p className="kodza-command__heading" aria-hidden="true">Actions</p>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Copy the code</span>
<kbd className="kodza-command__kbd">⌘C</kbd>
</div>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Toggle dark mode</span>
</div>
<div className="kodza-command__option" role="option">
<span className="kodza-command__text">Deploy on a Friday</span>
<kbd className="kodza-command__kbd">brave</kbd>
</div>
</div>
</div>
<p className="kodza-command__empty" hidden>Nothing found. Not even a bug.</p>
</div>
<div className="kodza-command__footer" aria-hidden="true">
<span><kbd className="kodza-command__kbd">↑</kbd><kbd className="kodza-command__kbd">↓</kbd> to move</span>
{' '}
<span><kbd className="kodza-command__kbd">↵</kbd> to pick</span>
</div>
</dialog>
</div>
);
}Checked
Checked before you paste.
Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.
What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices.
0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does.
Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops.
Passed
Light and darkThe same checks on both themes, contrast included.
Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag.
8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
Anywhere
- Opens it, or closes it when it's open⌘K
In the search field
- Next or previous result, round and round↓/↑
- Picks the highlighted result and closesEnter
Anywhere, while it's open
- Closes it, focus back on the buttonEsc
Hover Nav
A pill of links where the highlight slides under the pointer and settles back on the current page. The ink version turns the text white right at its edges.
View code
Scroll Header
A floating glass pill that clears the top of the page, frosts as you scroll, steps aside while you read and turns to dark glass over dark sections.
View code
Table of Contents
A summary card built from your headings: an ink marker follows the section you read, a ring fills, the time left counts down. A bar on phones.
View code
Breadcrumbs
A breadcrumb trail that folds its middle behind a "…" button when it would not fit on one line, and unfolds it crumb after crumb.
View code
Context Menu
A right-click menu that grows from the exact point you clicked, stays on screen and works from the keyboard with Shift + F10.
View code