themeocean

Glowing Neon Search Bar

Component

About

A dark search bar with a flowing violet, indigo and cyan neon border on focus and a Ctrl+K shortcut badge.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glowing Neon Search Bar to your project and fits it to your theme.

Code

How Glowing Neon Search Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

import GlowingSearchBar from "@/components/ui/glowing-neon-search-bar";

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  return (
    <div className="flex min-h-screen items-start justify-center bg-neutral-950 px-6 pt-32">
      <GlowingSearchBar onSearch={(q) => console.log("Search:", q)} />
    </div>
  );
}

More by themeocean

View all
  • 3D Tilt Glow Feature Card

    3D Tilt Glow Feature Card

  • Liquid Metal Shimmer Button

    Liquid Metal Shimmer Button

  • Animated AI Chat Input

    Animated AI Chat Input

  • Modern AI Input Box

    Modern AI Input Box