Result Item
A copy-paste command palette component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Command PaletteHTMLCSSany framework
Generate codeFrom prompt
↵Copy into your project
HTML
<!-- Result Item — toggle .is-active for keyboard navigation -->
<div class="nuda-resitem is-active">
<span class="nuda-resitem__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2 L13.5 8.5 L20 10 L13.5 11.5 L12 18 L10.5 11.5 L4 10 L10.5 8.5 Z" />
</svg>
</span>
<div class="nuda-resitem__text">
<span class="nuda-resitem__title">Generate code</span>
<span class="nuda-resitem__hint">From prompt</span>
</div>
<span class="nuda-resitem__kbd"><kbd>↵</kbd></span>
</div>CSS
/* Result Item
Single command-palette row: icon, title + hint, enter shortcut.
Customize: --res-accent */
.nuda-resitem {
--res-accent: #e4ff54;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 7px;
background: transparent;
color: #a1a1aa;
cursor: pointer;
transition: background 0.15s, color 0.15s;
width: 100%;
max-width: 320px;
}
.nuda-resitem:hover {
background: rgba(255, 255, 255, 0.04);
color: #fafafa;
}
.nuda-resitem.is-active {
background: rgba(228, 255, 84, 0.1);
color: var(--res-accent);
}
.nuda-resitem__icon {
flex-shrink: 0;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(228, 255, 84, 0.1);
border-radius: 6px;
color: var(--res-accent);
}
.nuda-resitem__icon svg { width: 14px; height: 14px; }
.nuda-resitem__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.nuda-resitem__title {
font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
color: inherit;
}
.nuda-resitem.is-active .nuda-resitem__title,
.nuda-resitem:hover .nuda-resitem__title { color: #fafafa; }
.nuda-resitem__hint {
font: 500 0.7rem ui-sans-serif, system-ui, sans-serif;
color: #63636e;
}
.nuda-resitem__kbd kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 5px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 5px;
font: 700 0.75rem ui-monospace, monospace;
color: #a1a1aa;
line-height: 1;
}How to use Result Item
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.