Billing Notification Center

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing79.tsx instead.

Usage

The file also exports billing79Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing79, billing79Demo } from "@/components/blocks/billing/billing79";

export default function Page() {
  return <Billing79 {...billing79Demo} />;
}

Props

Types

type NotificationType = "error" | "warning" | "info" | "success";

interface NotificationItem {
  id: string;
  type: NotificationType;
  title: string;
  message: string;
  timeAgo: string;
  read?: boolean;
  actionLabel?: string;
  actionHref?: string;
}

Behavior notes

• The notifications prop only seeds initial state, it's copied into a local useState array on mount. Mark-as-read and dismiss both act on that local copy, not the prop, so re-rendering with a new notifications array after mount won't reset the list.
• type drives the icon and color through an internal lookup (error, warning, info, success), so callers only ever pass one of those four plain strings, never a component.
• Unread items get a subtle background tint and a small dot next to the title; the header badge counts them and disappears once the count hits zero.
• Dismissing the last item swaps the list for an empty state with a BellOff icon and emptyMessage, rather than leaving a blank panel.
• actionHref and actionLabel are optional per item; when both are set, a small inline link appears next to the timestamp, otherwise it's omitted.

Frequently asked questions