Search Results Tabs
A beautiful component for displaying search results with web pages, images, and news in an organized, interactive layout.
A beautiful component for displaying search results with web pages, images, and news in an organized, interactive layout.
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.
Segments global search. Filters by messages, files, or actions instantly.
npx shadcn@latest add https://bungas.treonstudio.com/r/search-results-tabs.jsonimport { 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",
},
],
}}
/>