Inbox Zero Notifications
Empty state for a cleared notifications list, with an inbox icon, an all-caught-up message, and a View All Notifications link.
@7ovr
Empty state for a cleared notifications list, with an inbox icon, an all-caught-up message, and a View All Notifications link.
@7ovr
registry/blocks/empty-states/1/empty-states-block.tsx
import { Button } from "@/components/ui/button"
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"
import { IconPlaceholder } from "@/components/icons/icon-placeholder"
export default function EmptyStatesBlock() {
return (
<section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
<div className="w-full max-w-md">
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<IconPlaceholder
lucide="Inbox"
tabler="IconInbox"
hugeicons="InboxIcon"
phosphor="Tray"
remixicon="RiInboxLine"
className="size-4"
/>
</EmptyMedia>
<EmptyTitle>You're all caught up</EmptyTitle>
<EmptyDescription>
No new notifications right now. We'll let you know the moment
something needs your attention.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button
variant="outline"
render={<a href="#" />}
nativeButton={false}
>
View All Notifications
</Button>
</EmptyContent>
</Empty>
</div>
</section>
)
}
Requires a base-* style in components.json (the shadcn init default). Legacy new-york/radix-* styles install Radix primitives, which reject the render prop this block uses.
