Search Blocks

Find-it-fast search that feels alive while it works.

Expanding Search

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.

pnpm dlx shadcn@latest add @ditherui/expanding-search

Install

$ pnpm dlx shadcn@latest add @ditherui/expanding-search

Props

PropTypeDefault

items{ id: string; title: string; section: string }[]nine sample docs

placeholderstring"Search the docs"

onSelect(item: SearchItem) => void—

classNamestring—

Search Modal

ProOpen page

A search icon button that opens a Center Morph Modal: the dialog unfolds from its exact centre with the field already focused and suggestions listed. It shares the Expanding Search's behaviour: a spinner and shimmering rows while you type, matches that stagger in with your text highlighted, a sliding highlight, the isometric no-results figure, and arrow keys and Enter. The body has a fixed height so the modal holds still while the results change. Choosing a result calls onSelect and closes it. Pass shortcut to also open on Ctrl or Cmd + K. Needs lib/search.ts, components/search-results.tsx, components/empty-state-figures.tsx, components/iso-parts.tsx and lib/iso.ts alongside.

pnpm dlx shadcn@latest add @ditherui/search-modal