Footer Hints
A copy-paste command palette component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Command PaletteHTMLCSSany framework
↑↓ to navigate↵ to selectesc to close
Copy into your project
HTML
<!-- Footer Hints — keyboard shortcuts shown at the bottom of a palette -->
<div class="nuda-cmdkftr">
<span class="nuda-cmdkftr__hint"><kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
<span class="nuda-cmdkftr__hint"><kbd>↵</kbd> to select</span>
<span class="nuda-cmdkftr__hint"><kbd>esc</kbd> to close</span>
</div>CSS
/* Footer Hints
Subtle keyboard cheatsheet pinned to the bottom of a command palette.
Customize: container colors, font size. */
.nuda-cmdkftr {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.06);
font: 500 0.7rem ui-sans-serif, system-ui, sans-serif;
color: #63636e;
border-radius: 0 0 10px 10px;
}
.nuda-cmdkftr__hint {
display: inline-flex;
align-items: center;
gap: 4px;
}
.nuda-cmdkftr__hint kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
font: 700 0.625rem ui-monospace, monospace;
color: #a1a1aa;
line-height: 1;
}How to use Footer Hints
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.