Scoped Search, animated React component

A search field that understands filters. Type from:anna or is:unread and the words lift out of the text into a chip, from exactly where you typed them. Remove one by pressing it, by Backspace twice, or by dragging it out. Results fold away and slide up instead of blinking.

Pro
Inputs & Controls

Play with it

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

6 messages

Anna Lee9:41Design review moved to ThursdaySame room, 2pm. Bring the onboarding flows.
Marcus Webb9:12Invoice for OctoberAttached is the invoice for last month's work.
Anna LeeYesterdayIcons for the new tab barHere are three directions, I like the second.
Priya ShahYesterdayRelease notes draftCan you check the wording on the design section?
Leo ParkTueLunch on Friday?The new place on Fourth, around noon.
Priya ShahMonQ4 roadmapFinal version with the design and eng dates.

Props

Prop	Type	Default	What it does
autoplay	boolean	false	Types a search by itself so a chip can be seen forming, until the visitor touches the field. Never runs under reduced motion and pauses while the card is off screen.
items	{ id: number; from: string; who: string; subject: string; preview: string; time: string; unread?: boolean; starred?: boolean; attachment?: boolean; archived?: boolean }[]	a sample inbox	The messages to search. from: matches who, and is:unread, is:starred, has:attachment and is:archived match the flags.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Scoped Search is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Pro
NewSound
Card Reader Verify
Pro
NewSound
Smart Light
Pro
NewSound
Range Calendar
Pro
New
Live Summary

Scoped Search, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Scoped Search, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls