Search modal

A search field whose card drops down with a gliding scope control and live counts, recent things as soft cards, a featured top result, highlighted matches and an open hint. Inline, or as a Cmd K modal.

Forms, type and press, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/search-modal.tsx https://motion-brew.com/r/search-modal.tsx

One self contained file for React and Tailwind CSS: search-modal.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { SearchModal } from "@/components/search-modal";

export default function Header() {
  return (
    <SearchModal
      modal
      items={items}
      groups={["Products", "Shops", "Keywords"]}
      defaultScope="All"
      onSelect={(item) => router.push(`/go/${item.id}`)}
    />
  );
}

Props

Prop	Type	Default	Description
items	SearchModalItem[]	sample shop data	id, title, group, meta, tint
groups	string[]	four groups	The scopes, after All
defaultScope	string	"All"	The scope at first
recent	string[]	four ids	Jump back in cards before typing, up to four
actions	SearchModalAction[]	four shortcuts	id, label, icon, key (for ⌘ plus key)
placeholder	string	a short hint	Shown when there are no examples
examples	string[]	five sample searches	Rolled through as Search for "kettle"; Tab fills it
modal	boolean	false	Open over the page with Cmd or Ctrl K
defaultOpen	boolean	false	With modal
onSelect	(item) => void		An item or an action was opened
className	string

More forms

Message composer: A white rich text composer: a text style menu that pours open, formatting that lights up under the caret, @ mentions, emoji, uploading thumbnails, a voice note timer, an AI polish, scheduled sending with a calendar, and a split send button whose plane flies off.
OTP code: A one time code card with split boxes and no confirm button.
Auth card: Sign in and sign up in one card.
File drop: A drag and drop uploader.

All animated react form components