Updates Area

Installation

pnpm dlx shadcn@latest add @ffg/updates-area

Usage

import { UpdatesArea } from "@/components/ui/updates-area";

<UpdatesArea
  update={{
    type: "action",
    title: "Action needed",
    copy: "Confirm your beneficiary details to release the pending allocation.",
    action: { label: "Confirm details", onClick: () => {} },
  }}
/>

A single-update notification region rendered below the hero. It shows one dismissible update at a time and returns null once the ✕ is clicked. Four update types:

• status — bare progress stepper with an optional title; no card chrome
• action — callout card with title, copy, and a CTA button (Bell icon)
• advisory — callout card with title and copy (Clock icon)
• general — callout card with title and copy (Info icon)

The three callout types are expressed through a calloutVariants cva variant, which selects the leading icon while keeping the shared card chrome.

Dark mode: the callout card maps the product's surface-wash and faint border to bg-card / border-border; titles and icons use text-foreground, copy uses text-muted-foreground, and the CTA maps to the primary token pair so it inverts correctly. The stepper track uses bg-muted while the progress fill keeps the brand cerulean accent.