Seek Search, animated React component

A round search button that opens into a field as one object: the pill springs wider while the magnifier turns, and a list of local suggestions drops in underneath and filters as you type. Escape, or leaving it empty, folds it back.

Pro
Inputs & Controls
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

Prop	Type	Default	What it does
suggestions	string[]	["Quarterly report", "Design review notes", …]	Local suggestions shown under the field and filtered as you type. Nothing is fetched.
placeholder	string	"Search files"	Placeholder and accessible name of the field.
maxLength	number	64	Longest query the field accepts; the query is trimmed before filtering.
onSelect	(suggestion: string) => void	undefined	Called with a suggestion when it is clicked.
autoplay	boolean	false	Opens, types a word, clears and folds back on a loop until the user interacts.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/seek-search
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
seek-search/
index.ts
seek-search.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { SeekSearch } from "@/components/seek-search";

export default function Page() {
  return (
    <main>
      <SeekSearch />
    </main>
  );
}

SeekSeek Search, animated React component

Play with it

Props

More inputs & controls

Seek Search, animated React component