Notices

Notification cards in tinted trays, with a live delete countdown and undo, an invoice to pay, a storage warning and a deploy report, built from Another UI primitives.

Notices4

Invoice deleted
INV-2026-0412 moved to trash.
Permanently deleted in 5 seconds
Nov15
Invoice INV-0412 from Fraser Valley Print Co.
$1,240in 3 days
Your workspace has used 95% of its storage
Uploads, syncing and backups stop once storage is full. Free up space or upgrade your plan.
Storage limit warning47.5 / 50 GB
Production deploy finished for api-gateway v2.4.1
All 12 services passed their health checks. The rollout took 3 minutes 42 seconds, with no errors.
Productionv2.4.13m 42s
5 of 5 checks passeda41f9c2

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/notices.json

Features

Card in a tray. Each notice is a white Card with an icon or date tile, title, description, close button and actions. A tinted tray around it carries a footer line in the notice's tone: default, destructive, warning, success or info, with dark mode.
Delete with undo. "Invoice deleted" counts down live in its tray, with each second popping in (transitions.dev number pop-in). Undo restores the invoice and the tray turns green as its footer folds away. At zero the notice goes for good.
Pay an invoice. The due card shows a date tile and the Amount. Pay invoice opens a Responsive Dialog to confirm, and the card turns into a payment receipt with a Copy Button for the confirmation number.
Storage warning. A Progress bar, Badges for the warning and the space used, and a tray footer to upgrade or learn more. The learn more chevron uses the transitions.dev hover.
Deploy report. The caret opens a Collapsible with each check on a Timeline. The footer copies the commit.
Auto close. "Payment received" closes itself after 8 seconds unless you keep it open.
Motion and sound. Notices rise in and leave with the transitions.dev toast motion, and the list reflows with card resize. Cuelume plays on open, close, undo and pay.
Toolbar. Add a sample of any kind, replay them all, or Clear all, in one row.

Events

A notice can start as a plain card and grow its tray when something happens. Press the button on each card.

Sync to QuickBooks

42 new transactions from RBC Business chequing since Oct 9.

Invoice INV-0418

Harrison Hot Springs Resort, $2,860.00 due Nov 1.

Workspace backup

Last backup Oct 11 at 2:00 AM to Backblaze B2.

Receipt RC-2291

Canadian Tire, Chilliwack. $86.41 on Oct 10.

Sync finished. "Sync to QuickBooks" is a plain card until you press Sync now. When it finishes, the green tray grows out from under the card with the count and a transitions.dev success check.
Send failed. Sending INV-0418 fails the first time. The card shakes (transitions.dev error shake), the error cue plays and the red tray grows with Retry. The retry goes through and the tray turns green.
Backup running. The tray turns amber with a live count and a Progress bar while each folder backs up, then green when it is done.
Delete with undo. Delete turns the tray red with the live countdown and Undo. Undo folds it back to a plain card.
Motion and sound. The footer grows with the transitions.dev accordion expand while the tint fades in and bleeds out past the card edge, and the footer line rises with texts reveal. Cuelume plays tap, open, success, error and close. With reduced motion, the tray shows its end state at once.

Usage

import { Notices, SAMPLE_NOTICES } from "@/components/blocks/notices"

<Notices notices={SAMPLE_NOTICES} />

Build your own notice from the parts: NoticeTray takes a tone and a footer, NoticeCard is the white card, and NoticeBody lays out the media, title, description and actions.

Pass open to drive the tray from an event. Closed, the notice is a plain card. Change footerKey to replay the footer reveal when the text changes while the tray stays open.

<NoticeTray
  tone={failed ? "destructive" : "success"}
  open={state !== "idle"}
  footerKey={state}
  footer={failed ? "Could not reach the mail server." : "Sent"}
>
  <NoticeCard>
    <NoticeBody title="Invoice INV-0418" description="Harrison Hot Springs Resort" />
  </NoticeCard>
</NoticeTray>

Sheets Settings