euedujbarrios-uiby edujbarrios
Back to components

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

Command palette

⌘K
Generate dashboard layout

3 actions ready · 1 agent online

Cards

Glass Command Card

Beginner

A glassmorphism command card for product shortcuts, palettes, and agent actions.

glasscommandshortcut
View component

Inputs

AI Chat Input

Intermediate

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

aichatform
View component

Inputs

File Dropzone

Intermediate

A drag-and-drop upload surface for assets, screenshots, and UI reference files.

uploadfiledropzone
View component