Cmd+K Trigger
A copy-paste search & autocomplete component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Search & AutocompleteHTMLCSSany framework
Copy into your project
HTML
<button class="nuda-cmdk-mini" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="7" />
<path d="m21 21-4.3-4.3" />
</svg>
<span>Search</span>
<kbd>⌘K</kbd>
</button>CSS
.nuda-cmdk-mini {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 8px 6px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #a0a0a8;
cursor: pointer;
transition: background 0.25s, border-color 0.25s, transform 0.15s;
}
.nuda-cmdk-mini:hover {
border-color: #e4ff54;
color: #fafafa;
transform: translateY(-1px);
}
.nuda-cmdk-mini kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 2px 6px;
border-radius: 5px;
color: #a0a0a8;
}How to use Cmd+K Trigger
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.