Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Lens Search, animated React component

A search box whose magnifying glass is a real lens. Type, and the magnifier lifts out of the field and grows into a glass lens over the list. It looks down the rows, magnifying each as it passes and dimming the ones that do not match, and parks on the first match with a chime, the matched letters in blue under the glass. Arrow keys glide it between matches, and Enter or a click opens one. When nothing matches it reaches the bottom, shakes its head and goes home. Clear the field or press Escape and it drops back in as the icon. The field is a combobox over a listbox, with the result count in a polite live region.

  • Pro
  • Inputs & Controls
  • Spring

Air as the lens lifts out of the field, soft ticks as it passes rows, a chime when it parks on a match, and two low notes when nothing matches. Sound is off on this site until you switch it on.

Play with it

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

  • Wi-FiNetworks, hotspots
  • NotificationsBanners, sounds, badges
  • FocusDo not disturb, sleep
  • AppearanceLight, dark, text size
  • PrivacyLocation, tracking, camera
  • PasswordsSaved logins, passkeys
  • LanguageRegion, keyboards

Type to search. The lens finds it.

Props

PropTypeDefaultWhat it does
items{ id: string; title: string; caption?: string; keywords?: string; color?: string }[]—The rows to search. Keywords are extra words a row answers to, not shown; color is the icon tile's colour.
placeholderstring"Search settings"The field's placeholder.
onSelect(item) => void—Called with the row that is opened with Enter or a click.
enableSoundbooleantrueA lift as the lens comes out, soft ticks as it passes rows and a chime on a match. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseTypes a few searches by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 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. 2

    Connect the registry with your API key

    Lens 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}"
    }
  }
}

How Lens Search works

Search whose magnifying glass is a real lens. Type, and the magnifier lifts out of the field and grows into a glass lens over the list. It looks down the rows, magnifying each as it passes and dimming the ones that don't match, and parks on the first match with a chime, the matched letters in blue under the glass. Arrow keys glide it between matches, Enter or a click opens one. When nothing matches, it reaches the bottom, shakes its head and goes home.

The source, the install command and the build prompt come with Pro.

Lens Search questions

Does it make sound, and how do I turn it off?

Air as the lens lifts out of the field, soft ticks as it passes rows, a chime when it parks on a match, and two low notes when nothing matches. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More inputs & controls