Notification Inbox

A bell with an unread count that opens a notification popover: All and Mentions tabs, unread dots, mark all read, type icons and an empty state. Built in React.

src/registry/ui/notification-inbox.tsx/r/notification-inbox.json

Click the bell

Installation#

bash

npx shadcn@latest add https://ui.minidev.pro/r/notification-inbox.json

Usage#

tsx

import { NotificationInbox } from "@/components/ui/notification-inbox"

export function Example() {
  return (
    <NotificationInbox />
  )
}

API reference#

NotificationInbox props
Prop	Type	Default
`notes`	`Note[]`	`SAMPLE`
`className`	`string`	`-`

Dependencies#

npm

@base-ui/reactlucide-react

Built from

No other MiniDev files

Examples#

New in 0.2Interactive chart, toasts, agent runs, inbox

Alert DialogShadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.Command DialogCommand dialog that opens the command palette in a modal from a list of commands with labels and handlers. Wire it to a Cmd K shortcut in your React app.Confirm DestructiveDestructive action confirm: a red trigger button opens a dialog with a title, warning text, Cancel and Confirm. Labels are configurable for deletes and resets.Context MenuRight click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.DialogShadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar.DrawerBottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.

All dialog, drawer and popover components