# Inbox Preview > A mail client in one block: unread dots, coloured labels, hover actions, rows you swipe to archive or mark read (with undo), j/k/e shortcuts and a reading pane that slides over the list on phones. - Page: https://devl.dev/blocks/inbox-preview - Kind: block · Apps - Install: `npx shadcn@latest add https://devl.dev/r/inbox-preview.json` - Raw source: https://devl.dev/raw/inbox-preview.tsx - npm: lucide-react, motion - coss ui: button, kbd - License: MIT. The coss ui components it uses (https://coss.com/ui) are AGPL-3.0. ## Usage ```tsx import { type InboxLabel, InboxPreview } from "@/components/inbox-preview"; const work: InboxLabel = { name: "Work", tone: "bg-sky-500/12 text-sky-700 dark:text-sky-300" }; const finance: InboxLabel = { name: "Finance", tone: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300" }; const travel: InboxLabel = { name: "Travel", tone: "bg-amber-500/12 text-amber-800 dark:text-amber-300" }; const team: InboxLabel = { name: "Team", tone: "bg-violet-500/12 text-violet-700 dark:text-violet-300" }; export default function InboxPreviewDemo() { return (
); } ``` ## Props | Prop | Type | Default | | --- | --- | --- | | `emails` | `InboxEmail[]` | | | `me`? | `string` | `"you"` | | `onArchive`? | `(email: InboxEmail) => void` | | | `onReply`? | `(email: InboxEmail, text: string) => void` | | | `onSnooze`? | `(email: InboxEmail) => void` | | | `className`? | `string` | | ## Source: components/inbox-preview.tsx ```tsx "use client"; import { ArchiveIcon, ArrowLeftIcon, ClockIcon, InboxIcon, MailIcon, MailOpenIcon, PaperclipIcon, ReplyIcon, SearchIcon, SendIcon, } from "lucide-react"; import { AnimatePresence, motion, type PanInfo, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { cn } from "@/lib/utils"; export interface InboxLabel { name: string; tone: string; } export interface InboxEmail { id: string; from: { name: string; email: string; tone?: string }; subject: string; snippet: string; body: string[]; time: string; date: string; unread?: boolean; labels?: InboxLabel[]; attachment?: { name: string; size: string }; } export interface InboxPreviewProps { emails: InboxEmail[]; me?: string; onArchive?: (email: InboxEmail) => void; onReply?: (email: InboxEmail, text: string) => void; onSnooze?: (email: InboxEmail) => void; className?: string; } const ease = [0.23, 1, 0.32, 1] as const; const SWIPE = 88; const TONES = [ "bg-sky-500/15 text-sky-700 dark:text-sky-300", "bg-rose-500/15 text-rose-700 dark:text-rose-300", "bg-amber-500/15 text-amber-800 dark:text-amber-300", "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300", "bg-violet-500/15 text-violet-700 dark:text-violet-300", ]; function initials(name: string) { return name .split(" ") .map((w) => w[0]) .join("") .slice(0, 2) .toUpperCase(); } function Avatar({ email, size = "size-9" }: { email: InboxEmail; size?: string }) { const tone = email.from.tone ?? TONES[email.from.name.length % TONES.length]; return ( {initials(email.from.name)} ); } function Row({ email, selected, onSelect, onArchive, onToggleRead, onSnooze, }: { email: InboxEmail; selected: boolean; onSelect: () => void; onArchive: () => void; onToggleRead: () => void; onSnooze: () => void; }) { const reduce = useReducedMotion(); const x = useMotionValue(0); const archiveOpacity = useTransform(x, [-SWIPE, -24, 0], [1, 0.4, 0]); const readOpacity = useTransform(x, [0, 24, SWIPE], [0, 0.4, 1]); const archiveScale = useTransform(x, [-SWIPE * 1.2, -SWIPE, -24], [1.1, 1, 0.7]); const readScale = useTransform(x, [24, SWIPE, SWIPE * 1.2], [0.7, 1, 1.1]); const dragged = useRef(false); const onDragEnd = (_: unknown, info: PanInfo) => { if (info.offset.x <= -SWIPE) onArchive(); else if (info.offset.x >= SWIPE) onToggleRead(); setTimeout(() => (dragged.current = false), 0); }; return (
{email.unread ? : }
!dragged.current && onSelect()} onDragEnd={onDragEnd} onDragStart={() => (dragged.current = true)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSelect(); } }} role="button" aria-current={selected || undefined} style={{ x }} tabIndex={selected ? 0 : -1} >

{email.unread && Unread: } {email.from.name}

{email.time}

{email.subject}

{email.snippet}

{(email.labels?.length || email.attachment) && (
{email.labels?.map((l) => ( {l.name} ))} {email.attachment && }
)}
); } export function InboxPreview({ emails: initial, me = "you", onArchive, onReply, onSnooze, className }: InboxPreviewProps) { const reduce = useReducedMotion(); const uid = useId(); const tabsId = useId(); const listRef = useRef(null); const [emails, setEmails] = useState(() => initial.map((e, i) => (i === 0 ? { ...e, unread: false } : e))); const [selectedId, setSelectedId] = useState(initial[0]?.id ?? null); const [mobileOpen, setMobileOpen] = useState(false); const [filter, setFilter] = useState<"all" | "unread">("all"); const [query, setQuery] = useState(""); const [undo, setUndo] = useState<{ email: InboxEmail; index: number } | null>(null); const [reply, setReply] = useState(""); const [sent, setSent] = useState(null); const visible = useMemo(() => { const q = query.trim().toLowerCase(); return emails.filter( (e) => (filter === "all" || e.unread || e.id === selectedId) && (!q || `${e.from.name} ${e.subject} ${e.snippet}`.toLowerCase().includes(q)), ); }, [emails, filter, query, selectedId]); const selected = emails.find((e) => e.id === selectedId) ?? null; const unreadCount = emails.filter((e) => e.unread).length; useEffect(() => { if (!undo) return; const t = setTimeout(() => setUndo(null), 5000); return () => clearTimeout(t); }, [undo]); useEffect(() => { if (!sent) return; const t = setTimeout(() => setSent(null), 2400); return () => clearTimeout(t); }, [sent]); const select = (id: string) => { setSelectedId(id); setMobileOpen(true); setReply(""); setEmails((list) => list.map((e) => (e.id === id ? { ...e, unread: false } : e))); }; const archive = (id: string) => { const index = emails.findIndex((e) => e.id === id); const email = emails[index]; if (!email) return; const nextVisible = visible.filter((e) => e.id !== id); const vi = visible.findIndex((e) => e.id === id); if (selectedId === id) { const n = nextVisible[Math.min(vi, nextVisible.length - 1)]; setSelectedId(n?.id ?? null); if (!n) setMobileOpen(false); } setEmails((list) => list.filter((e) => e.id !== id)); setUndo({ email, index }); onArchive?.(email); }; const restore = () => { if (!undo) return; setEmails((list) => { const next = [...list]; next.splice(Math.min(undo.index, next.length), 0, undo.email); return next; }); setSelectedId(undo.email.id); setUndo(null); }; const toggleRead = (id: string) => setEmails((list) => list.map((e) => (e.id === id ? { ...e, unread: !e.unread } : e))); const focusRow = (id: string) => { requestAnimationFrame(() => listRef.current?.querySelector(`[data-email-id="${id}"]`)?.focus()); }; const onListKey = (e: KeyboardEvent) => { if (!visible.length) return; const i = Math.max(0, visible.findIndex((m) => m.id === selectedId)); if (e.key === "j" || e.key === "ArrowDown") { e.preventDefault(); const n = visible[Math.min(visible.length - 1, i + 1)]; setSelectedId(n.id); focusRow(n.id); } else if (e.key === "k" || e.key === "ArrowUp") { e.preventDefault(); const n = visible[Math.max(0, i - 1)]; setSelectedId(n.id); focusRow(n.id); } else if (e.key === "e" && selectedId) { e.preventDefault(); const after = visible[i + 1] ?? visible[i - 1]; archive(selectedId); if (after) focusRow(after.id); } else if (e.key === "u" && selectedId) { e.preventDefault(); toggleRead(selectedId); } }; return (

Inbox {unreadCount}

{(["all", "unread"] as const).map((f) => ( ))}
    {visible.map((email) => ( archive(email.id)} onSelect={() => select(email.id)} onSnooze={() => onSnooze?.(email)} onToggleRead={() => toggleRead(email.id)} selected={email.id === selectedId} /> ))}
{!visible.length && (

{query ? "No matches" : filter === "unread" ? "All caught up" : "Inbox zero"}

{query ? `Nothing in your inbox mentions “${query}”.` : "Nothing new. Go do something nice."}

)}
j k move e archive u unread

Swipe left to archive, right to mark read

{selected ? (
{selected.labels?.map((l) => ( {l.name} ))}

{selected.subject}

{selected.from.name}{" "} <{selected.from.email}>

To {me}

{selected.date}
{selected.body.map((p, i) => (

{p}

))}
{selected.attachment && (
{selected.attachment.name} {selected.attachment.size}
)}
{ e.preventDefault(); if (!reply.trim()) return; onReply?.(selected, reply.trim()); setSent(selected.from.name.split(" ")[0]); setReply(""); }} >