Notification inbox with All, Unread and Mentions tabs and their counts, grouped into Today and Earlier from each item's time. Click a row and its unread dot dissolves, hover or focus it to archive, snooze or mark it unread, and an undo toast brings back anything you cleared. j and k move through the rows and e archives. The card keeps its size through all of it. items and now are props. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev
import { useEffect } from "react"
import Inbox, { type InboxActor, type InboxItem } from "@/components/ui/inbox"
// A fixed "now" in local time, so Today / Earlier and every relative time read the same anywhere.
const NOW = new Date(2026, 8, 26, 14, 30)
const ago = (minutes: number) => new Date(NOW.getTime() - minutes * 60_000)
const jane: InboxActor = { name: "Jane Park", hue: 52 }
const alex: InboxActor = { name: "Alex Kim", hue: 248 }
const mia: InboxActor = { name: "Mia Chen", hue: 100 }
const omar: InboxActor = { name: "Omar Ali", hue: 30 }
const lena: InboxActor = { name: "Lena Ortiz", hue: 330 }
const sam: InboxActor = { name: "Sam Rivera" } // no hue: an initials coin
const ITEMS: InboxItem[] = [
{ id: "n1", actors: [jane], text: "mentioned you in SSI-14 · Audit chart contrast before the Friday release", time: ago(2), unread: true, mention: true },
{ id: "n2", actors: [alex, mia, omar], text: "commented on Pricing page v3", time: ago(18), unread: true },
{ id: "n3", actors: [omar], text: "requested your review on #482 · Footer links", time: ago(47), unread: true },
{ id: "n4", actors: [mia], text: "marked SSI-11 · Retry failed webhooks as done", time: ago(125), unread: false },
{ id: "n5", actors: [lena, jane], text: "mentioned you in Onboarding copy review", time: ago(60 * 19), unread: true, mention: true },
{ id: "n6", actors: [sam], text: "invited you to the Billing v2 project", time: ago(60 * 26), unread: false },
{ id: "n7", actors: [alex], text: "shipped Release 2.14 to production", time: ago(60 * 24 * 3), unread: false },
]
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex w-full justify-center">
<Inbox items={ITEMS} now={NOW} />
</div>
)
}
Part of ssych ui — browse the full library on 21st.dev.