About
A compact mobile-style search bar with a search icon, a clear button that appears once there's a value, and an optional microphone button for voice input.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mobile Search to your project and fits it to your theme.
Code
How Mobile Search is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import { MobileSearch } from "@/components/ui/mobile-search";
export default function MobileSearchDemo() {
const [value, setValue] = React.useState("");
return (
<div className="flex w-full max-w-sm flex-col gap-3 bg-background p-6">
<MobileSearch
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Search products..."
showMic
onMicClick={() => alert("Voice search activated")}
/>
</div>
);
}
Dependencies
More by serayudigital
View all
Date Picker
10
Theme Toggle
Data Table
Chat Bubble