A beautiful component for displaying search results with web pages, images, and news in an organized, interactive layout.
On This Page
Command Palette
Search for a command to run...
Search for a command to run...
A beautiful component for displaying search results with web pages, images, and news in an organized, interactive layout.
On This Page
New AI assistant platforms are revolutionizing how people manage their digital workflows, with open-source solutions leading the charge in innovation and user adoption.
GitHub reports a 40% increase in contributions to open-source projects, with AI and productivity tools seeing the most growth across all categories.
Industry experts predict that personal AI assistants will become as ubiquitous as smartphones, with new capabilities emerging every quarter.
import { SearchResultsTabs } from "@/components/ui/search-results-tabs";
export default function Example() {
const searchResults = {
web: [
{
title: "Example Site",
url: "https://example.com",
content: "Description of the website...",
},
],
images: [
"https://images.unsplash.com/photo-1...",
"https://images.unsplash.com/photo-2...",
],
news: [
{
title: "News Article",
url: "https://news.example.com",
content: "Article content...",
score: 0.95,
date: "2025-11-10",
},
],
};
return <SearchResultsTabs search_results={searchResults} />;
}interface SearchResults {
web?: WebResult[];
images?: string[] | ImageResult[];
news?: NewsResult[];
}interface WebResult {
title: string;
url: string;
content: string;
date?: string;
}interface ImageResult {
url: string;
title?: string;
}interface NewsResult {
title: string;
url: string;
content: string;
score?: number;
date?: string;
}| Prop | Type | Default | Description |
|---|---|---|---|
| search_results | SearchResults | - | Object containing web, images, and news |
| onImageClick | (imageUrl: string) => void | undefined | Callback when an image is clicked |
<SearchResultsTabs
search_results={{
web: [
{
title: "Example",
url: "https://example.com",
content: "Description",
},
],
}}
/><SearchResultsTabs
search_results={{
images: [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
],
}}
/>const [selectedImage, setSelectedImage] = useState<string | null>(null);
<SearchResultsTabs
search_results={{ images: [...] }}
onImageClick={setSelectedImage}
/><SearchResultsTabs
search_results={{
news: [
{
title: "Article Title",
url: "https://news.example.com",
content: "Article excerpt...",
score: 0.95,
date: "2025-11-10",
},
],
}}
/>