Ranked search results with site icons, titles, source URLs, and plain text category tabs.
import { useState } from 'react'
import SearchResultsTabs, { SearchResultItem } from '@/components/ui/search-results-tabs'
const searchItems: SearchResultItem[] = [
{
id: 'postqued',
type: 'web',
source: 'Postqued',
title: 'Postqued - Social Media Workspace for Teams and AI Agents',
description:
'Postqued is a shared social media workspace where teams and AI agents plan, approve, and publish across 10 networks using the dashboard, API or MCP.',
url: 'https://postqued.com/',
icon: (
<img
src="https://cdn.21st.dev/assets/mirror/53/5305f956c0a22bc99192f35d798be78af37b9fdd79efb842d6bcc566e2e61227.svg"
alt=""
className="size-4 object-contain dark:invert"
/>
),
},
{
id: 'studyboost',
type: 'web',
source: 'Studyboost',
title: 'Studyboost \u2014 AI-Powered Study Tools for Students',
description:
'Upload your notes, textbooks, and slides. Get AI-generated flashcards, quizzes, summaries, and answers that cite your exact sources.',
url: 'https://studyboost.org/',
icon: (
<img
src="https://cdn.21st.dev/assets/mirror/50/50b30435bff131be1111b3f9f6a9dcfeb6360edb23a4aeb353f87460d0229827.svg"
alt=""
className="size-4 scale-150 object-contain dark:invert"
/>
),
},
{
id: 'aismartdecor',
type: 'web',
source: 'AI Smart Decor',
title: 'AI Smart Decor - AI Interior Design From a Photo',
description:
'Upload a photo of any room and redesign it with AI: virtual staging, wall recoloring and a wide range of interior styles.',
url: 'https://aismartdecor.com/',
icon: <img src="https://cdn.21st.dev/assets/mirror/11/11d7d3046b20f23402857cf1a5415aea25aaf884a7e31d56714015c47394e086.svg" alt="" className="size-4 object-contain" />,
},
{
id: 'workspace-1',
type: 'images',
source: 'Unsplash',
icon: (
<img
src="https://cdn.21st.dev/assets/mirror/0c/0c01689d29d7987bba2c6c536ebbddc9a72ed112c0105ad1f1e56bc82ebf3774.svg"
alt=""
className="size-4 object-contain dark:invert"
/>
),
title: 'Minimal home office',
url: 'https://unsplash.com/photos/modern-laptop-and-keyboard-on-a-home-office-desk-vR2kup7Uyds',
image: '/images/search/workspace-1.jpg',
imageAlt: 'Minimal home office',
},
{
id: 'workspace-2',
type: 'images',
source: 'Unsplash',
icon: (
<img
src="https://cdn.21st.dev/assets/mirror/0c/0c01689d29d7987bba2c6c536ebbddc9a72ed112c0105ad1f1e56bc82ebf3774.svg"
alt=""
className="size-4 object-contain dark:invert"
/>
),
title: 'A creative workspace',
url: 'https://unsplash.com/photos/modern-workspace-with-a-laptop-and-desk-setup-JGKPDKiqJVw',
image: '/images/search/workspace-2.jpg',
imageAlt: 'A creative workspace',
},
{
id: 'workspace-3',
type: 'images',
source: 'Unsplash',
icon: (
<img
src="https://cdn.21st.dev/assets/mirror/0c/0c01689d29d7987bba2c6c536ebbddc9a72ed112c0105ad1f1e56bc82ebf3774.svg"
alt=""
className="size-4 object-contain dark:invert"
/>
),
title: 'Desk setup with books',
url: 'https://unsplash.com/photos/a-modern-desk-setup-with-laptop-and-books-xjyHDnA93Pk',
image: '/images/search/workspace-3.jpg',
imageAlt: 'Desk setup with books',
},
{
type: 'news',
id: 'bbc',
source: 'BBC',
title: 'Shaun the Sheep creators say AI will never replace storytelling as new film launches',
description:
'The Bristol animation studio explores the craft of storytelling as the latest Shaun the Sheep film arrives in cinemas.',
url: '#',
publishedLabel: '16 hours ago',
icon: <img src="https://cdn.21st.dev/assets/mirror/47/47d2138ffddac3ba598ad056b27d348de4fe14d3a61a7e193aae51b77f7164d0.svg" alt="" className="size-4 object-contain" />,
},
{
type: 'news',
id: 'sky-news',
source: 'Sky News',
title: 'AI latest: King joins debate as ChatGPT maker discovers concerning message',
description:
'King Charles brings AI leaders together for a summit as companies face fresh questions about safety and control.',
url: '#',
publishedLabel: '1 day ago',
icon: <img src="https://cdn.21st.dev/assets/mirror/2c/2c2e5146660a0a0c30d1e2e4e08c8b6feff067ba81b9bb4c631d4aec68089fbc.svg" alt="" className="size-4 object-contain" />,
},
{
type: 'news',
id: 'cnbc',
source: 'CNBC',
title:
'OpenAI\u2019s latest AI revelation is a serious situation, Microsoft\u2019s Suleyman tells CNBC',
description:
'Microsoft AI chief Mustafa Suleyman discusses new safety concerns and the need to keep increasingly powerful AI systems aligned with people.',
url: '#',
publishedLabel: '14 hours ago',
icon: <img src="https://cdn.21st.dev/assets/mirror/d9/d9ecd195df285e384702e326dcf25bf70c2c396d1b53382ed8a20e61d51fb3ee.svg" alt="" className="size-4 object-contain" />,
},
]
export default function Demo() {
const [activeType, setActiveType] = useState<SearchResultItem['type']>('web')
return (
<div data-demo-stage className="flex min-h-[420px] w-full items-center justify-center p-10">
<div className="min-h-[37rem] w-full max-w-3xl">
<SearchResultsTabs
showTabs
activeType={activeType}
onActiveTypeChange={setActiveType}
items={searchItems}
query="Tools for product teams"
/>
</div>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.