Search
A modern search component with animated results and loading states
Preview
Interactive search component demo
📦 Installation
pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-search.json
💡 Usage Example
import Search from "@/components/zezo/search/Search";
import { IContentData } from "@zezosoft/zezo-ott-api-client";
const [value, setValue] = useState("");
const [results, setResults] = useState<IContentData[]>([]);
const [isLoading, setIsLoading] = useState(false);
<Search
value={value}
onChange={(val) => {
setValue(val);
setIsLoading(true);
// Call your search API here
// Then update results and set isLoading to false
}}
isLoading={isLoading}
results={results}
/>📘 Props
| Prop | Type | Required | Description |
|---|---|---|---|
| value | string | Yes | Current search input value |
| onChange | (val: string) => void | Yes | Callback when search input changes |
| isLoading | boolean | Yes | Shows loading shimmer animation |
| results | IContentData[] | Yes | Array of search results to display |
✨ Features
🔍 Smart Input
Focus states with theme colors
⚡ Loading State
Shimmer animation while loading
🎬 Animated Results
Smooth animations for results display
❌ No Results
Clear message when no results found
🎨 Theme Support
Uses dynamic theme colors
📱 Responsive
Works on all screen sizes
