Inputs

Neural Search Input

A rounded search field for command palettes, component galleries, and prompt libraries.

searchcommandinput

Installation

Copy and paste the code into your project.

Accessibility notes

The input includes a screen-reader label; wire slash-key focus behavior in your app shell.

/

Preview accent

TypeScript

export function NeuralSearchInput() {
  return (
    <label className="flex w-full max-w-sm items-center gap-3 rounded-full border border-[#40E0D0]/25 bg-[#0b0f14]/80 px-4 py-3 shadow-2xl">
      <span className="h-2.5 w-2.5 rounded-full bg-[#40E0D0] shadow-[0_0_14px_rgba(64,224,208,0.75)]" />
      <span className="sr-only">Search components</span>
      <input
        className="min-w-0 flex-1 bg-transparent text-sm text-white outline-none placeholder:text-slate-500"
        placeholder="Search command, prompt, or UI..."
        type="search"
      />
      <kbd className="rounded border border-white/10 bg-white/[0.06] px-2 py-1 text-xs text-slate-300">/</kbd>
    </label>
  );
}

Usage

<NeuralSearchInput />

Related components

Inputs

AI Chat Input

Intermediate

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform

View component

API key

Use environment variables in production.

Inputs

API Key Field

Beginner

A guarded credential input for settings screens, integrations, and developer tools.

apisecuritysettings

View component

Upload queue

3 files

prompts.csvuploading

evals.jsonlready

screens.zipqueued

Inputs

Dataset Upload Queue

Intermediate

A file queue for prompt datasets, eval fixtures, and design reference uploads.

uploaddatasetqueue

View component