Bento

Bento Inbox

Pronew

A notification inbox running off the card, where new notifications land on top while it is on screen.

Inbox

All3Team2System1

MCMaya deployed to production2m

Dependency update available14m

LPLeo commented on #4821h

Nightly backup finished3h

Stay in sync

Deploys, reviews and system events land in one inbox the moment they happen.

Installation

npx shadcn@latest add @blank-pro/bento-inbox

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoInbox } from "@/components/ui/bento-inbox"

<BentoInbox
  title="Inbox"
  tabs={[{ label: "All", count: 3 }, { label: "Team", count: 2 }]}
  items={[
    { title: "Maya deployed to production", author: "Maya Chen", time: "2m" },
    { title: "Dependency update available", time: "14m" },
  ]}
/>

The inbox is live: while the card is on screen, the list rotates a new notification onto the top every few seconds and the first tab's count goes up. It stops off screen and under reduced motion. An item without an author gets a system icon instead of initials.

The panel is positioned against the stage and runs off its right and bottom edges, so give the card a height (h-96, or a grid row).