Search Blocks

A search pill that opens a results tray beneath it. Focusing it lifts the pill and suggests a few results; typing swaps the magnifier for a spinner and shows shimmering placeholder rows for a beat, then the matches stagger in with your text highlighted, and a highlight slides between them. Arrow keys move, and Enter or a click chooses a result: its title drops into the field and the tray closes. Escape clears. Misses show the isometric no-results figure, a grid of empty slots under a magnifying glass, and the X spins on hover. Needs lib/search.ts, components/search-results.tsx, components/empty-state-figures.tsx, components/iso-parts.tsx and lib/iso.ts alongside. Sample docs are for Relay, a fictional API monitor.

Install

Props