Beam Search

A search bar whose bottom edge lights up with a traveling beam while it has focus, using the `line` preset of `border-beam` (Jakub Antalík, MIT, https://libraries.dev/beam). The beam fades in on focus and out on blur via the library's `active` prop, so idle bars stay quiet. Controlled or uncontrolled value, Escape clears, and class-based dark/light detection. Dependencies: border-beam, lucide-r…

Build promptPaste into Claude, Cursor or v0 with the Niblet MCP connected

Build the "Beam Search" React component in this project using the Niblet MCP (connected with my Niblet API key).

1. Call get_ui_component {"id": "beam-search"} to fetch its source files and dependencies.
2. Write each returned file at its target path, adapting the `@/` imports to this project's aliases.
3. Install the npm dependencies it lists. Add unprefixed registry dependencies with `npx shadcn@latest add <name>`; fetch `@niblet/<id>` ones with get_ui_component.
4. Render it on a page, run the type check, and confirm it works the way the live preview does.

Live preview: https://niblet.pymodel.com/components/beam-search
If the Niblet MCP is not connected, stop and tell me to create an API key at https://niblet.pymodel.com/account and follow https://niblet.pymodel.com/docs.

Category: uikit
License: MIT
Uses border-beam by Jakub Antalík (MIT), https://libraries.dev/beam
npm dependencies: border-beam
lucide-react@^0
Registry dependencies: utils
Files it installs: components/uikit/beam-search.tsx
components/uikit/use-surface-theme.ts

Get the source

The source is served to your agent through the hosted Niblet MCP. Have it run:

find_ui_materials {"query": "beam search", "kind": "component"}

```
get_ui_component {"id": "beam-search"}
```

Needs an API key: get one on your account, then see the MCP setup docs.