ns-ui

Search Winnow

Search input that winnows its list like grain from chaff: non-matching rows tumble aside with a slight rotation and fade, then their slot collapses so survivors settle together. Clearing the query lets the chaff drift back in. Full combobox keyboard pattern with a live match counter.

Use when a list short enough to stay on screen while the user types, where rejected rows should visibly leave rather than silently vanish, tumbling aside before their slot collapses and drifting back when the query clears; pick command-palette-orbit instead for open-ended ranked search across a large unbounded command set, or filter-facet-mesh when narrowing happens by toggling facets rather than typing.

Install

npx shadcn add https://design.helpmarq.com/r/search-winnow.json
  • search
  • filter
  • combobox
  • input
  • form
  • micro-interaction

ns-ui / search-winnow

10/10
  • grepsearch text
  • ripgrepsearch text, fast
  • sedstream edit
  • awkfield processing
  • jqquery JSON
  • cutslice columns
  • sortorder lines
  • uniqdedupe lines
  • xargsbuild arg lists
  • trtranslate chars

non-matches tumble aside and their slots close behind them — clear the query and the chaff settles back

Props

PropTypeDefaultDescription
itemsChaffWinnowItem[]——
placeholder?string——
label?string—accessible name for the search input
onSelect?(item: ChaffWinnowItem) => void——
className?string——
Back to the catalog