Notification Center
A React notification center card with a settings action and a stack of notification items showing title, body, relative time and an unread marker.
src/registry/blocks/notification-center.tsx/r/notification-center.json
Installation#
bash
npx shadcn@latest add @minidev/notification-center
MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/notification-center.json
Usage#
tsx
import { NotificationCenter } from "@/components/ui/notification-center"
export function Example() {
return <NotificationCenter />
}
API reference#
NotificationCenter takes no props. It ships with realistic sample content: install it, then edit the copy and data in the file directly. The file is yours.
Dependencies#
npm
React only
Built from
Related feedback components#
Empty WorkspaceAn empty workspace screen with a no projects empty state and new project action, plus follow up buttons to import from Git or invite teammates.BadgeShadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support.BannerInline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.CalloutTailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.Empty SearchNo results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.Empty StateDashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.
All alerts, toasts and empty states