Motion Search
A search field as a pill. Clicking it, or pressing its shortcut, grows the pill into a wider field with a spring and drops the results into a card beneath it; arrow keys move through them, Enter picks one and Escape closes it.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | MotionSearchItem[] | — | id and title, with optional description, keywords, icon and onSelect. |
| onSelect | (item) => void | — | Called when a result is picked. |
| placeholder | string | "Search" | The field's placeholder and accessible name. |
| shortcut | string | "f" | A key that opens it from anywhere outside a text field. An empty string turns it off. |
| iconOnly | boolean | false | A round search icon when closed, instead of a field. |
| emptyMessage | string | "No results found." | Shown when nothing matches. |
| open | boolean | — | Holds it open or closed. |
| defaultOpen | boolean | false | Its starting state, when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| onQueryChange | (query: string) => void | — | Called as the query changes. |
| className | string | — | Classes for the root element. |