Component Search

Component

About

A search input with a leading search icon for filtering docs, blocks, or components in a sidebar or layout header.

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

Code

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

Usage.tsx

"use client";

import ComponentSearch from "@/components/ui/component-search";
import { useState } from "react";

export default function ComponentSearchDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="w-full max-w-sm">
      <ComponentSearch value={value} onChange={setValue} />
    </div>
  );
}