Command palette (⌘K)

Ships-with-modern-site UX: ⌘K opens a search-first launcher, type to filter results, arrow keys to navigate, enter to jump. Use for skill libraries, product catalogs, docs. Preview auto-types a query so you see the filter kick in.

by FWONanimation-hovervanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="a40">
  <div class="head">
    <span class="icon">⌘K</span>
    <input type="text" placeholder="Search skills, pages, actions..." data-cmd-input>
    <span class="kbd">ESC</span>
  </div>
  <div class="results" data-cmd-results>
    <div class="res on" data-title="Pricing calculator"><span class="g">→</span><span class="t">Pricing calculator</span><span class="k">skill</span></div>
    <div class="res" data-title="Case study writer"><span class="g">→</span><span class="t">Case study writer</span><span class="k">skill</span></div>
    <div class="res" data-title="Cold email drafter"><span class="g">→</span><span class="t">Cold email drafter</span><span class="k">skill</span></div>
    <div class="res" data-title="Pricing page"><span class="g">→</span><span class="t">Pricing page</span><span class="k">page</span></div>
    <div class="res" data-title="Book a call"><span class="g">→</span><span class="t">Book a call</span><span class="k">action</span></div>
  </div>
  <div class="foot"><span>↑↓ navigate</span><span>↵ open</span><span>esc close</span></div>
</div>

Block id: tim-40-command-palette-kvanilla · drop-in

More animation-hover blocks

Animated gradient-border button

21st.dev

AI agent command panel with thinking state

linear

Hero video dialog with thumbnail

magicui

Meteor shower overlay

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call