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

PropTypeRequiredDescription
valuestringYesCurrent search input value
onChange(val: string) => voidYesCallback when search input changes
isLoadingbooleanYesShows loading shimmer animation
resultsIContentData[]YesArray 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