Morphing Search

Component 6

About

A search input that morphs into a glass results panel with filtering, keyboard arrow navigation, and a keyboard shortcut to open it, usable as a full field or a compact icon trigger.

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

Code

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

Usage.tsx

"use client";

import {
  MorphingSearch,
  type MorphingSearchItem,
} from "@/components/ui/morphing-search";
import { Blocks, BookOpen, Bot, FolderOpen, Palette } from "lucide-react";

const ITEMS: MorphingSearchItem[] = [
  {
    id: "project-folder",
    title: "Project Folder",
    description: "Block · Files and previews",
    keywords: ["files", "overlay"],
    icon: FolderOpen,
  },
  {
    id: "motion-components",
    title: "Motion components",
    description: "Collection · Interaction primitives",
    keywords: ["animation", "components"],
    icon: Blocks,
  },
  {
    id: "agent-interfaces",
    title: "Agent interfaces",
    description: "Collection · AI building blocks",
    keywords: ["ai", "chat"],
    icon: Bot,
  },
  {
    id: "installation",
    title: "Installation guide",
    description: "Documentation · Add your first component",
    keywords: ["setup", "shadcn"],
    icon: BookOpen,
  },
  {
    id: "design-tokens",
    title: "Design tokens",
    description: "Documentation · Color, type, and motion",
    keywords: ["theme", "styles"],
    icon: Palette,
  },
];

export default function MorphingSearchPreview() {
  return (
    <div className="flex w-full max-w-[22rem] items-center gap-3">
      <MorphingSearch items={ITEMS} placeholder="Find components" />
      <MorphingSearch
        items={ITEMS}
        placeholder="Find components"
        shortcut=""
        iconOnly
      />
    </div>
  );
}