Work still running elsewhere and completed results waiting to be collected.
import { useState } from 'react'
import BackgroundInbox from '@/components/ui/background-inbox'
export default function Demo() {
const [hiddenIds, setHiddenIds] = useState<string[]>([])
const items = [
{
id: 'audit',
title: 'Registry audit complete',
detail: '8 new product patterns are ready to review.',
status: 'ready' as const,
time: 'Just now',
},
{
id: 'visual',
title: 'Visual regression pass',
detail: 'Comparing 116 documentation routes.',
status: 'running' as const,
time: '2m elapsed',
},
{
id: 'report',
title: 'Market report',
detail: 'Waiting for two remaining sources.',
status: 'waiting' as const,
time: 'Queued 8m',
},
].filter((item) => !hiddenIds.includes(item.id))
return (
<BackgroundInbox
className="w-full max-w-lg"
items={items}
onDismiss={(id) => setHiddenIds((current) => [...current, id])}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.