Legacy Notification

Why Use It

Best for high-visibility alerts, inbox pings, and lock-screen style confirmations that should feel native to early iPhone UI.
Ships with a small Sonner helper, which means the toast path is ready as soon as your app already has the shadcn toaster mounted.
The component itself stays presentational, so you can also render it directly inside settings screens, message lists, or mock lock screens.

Installation

Install the notification component, then keep using your existing shadcn Sonner setup.

$ bunx --bun shadcn@latest add https://sabraman.ru/r/legacy-notification.json

Quick Start

Trigger the lock-screen toast with the exported helper.

"use client";

import { LegacyBarButton } from "@/components/legacy-bar-button";
import { showLegacyNotification } from "@/components/legacy-notification";

export function LegacyNotificationUsageExample() {
	return (
		<div className="flex w-full max-w-[340px] flex-col items-center gap-4">
			<LegacyBarButton
				className="min-w-[180px] justify-center"
				label="Show Notification"
				onClick={() => {
					showLegacyNotification({
						body: "Can you review the latest build?",
						subtitle: "Ava",
						time: "now",
						title: "Messages",
					});
				}}
				variant="accent"
			/>
			<p className="text-center text-[#8b9bb4] text-sm leading-relaxed">
				Uses the exported helper, which renders the component through Sonner
				with <code>toast.custom</code>.
			</p>
		</div>
	);
}

Examples

Sonner Trigger

Push the design through Sonner with the helper instead of styling a custom toast by hand.

Uses the exported helper, which renders the component through Sonner with toast.custom.

"use client";

import { LegacyBarButton } from "@/components/legacy-bar-button";
import { showLegacyNotification } from "@/components/legacy-notification";

export function LegacyNotificationUsageExample() {
	return (
		<div className="flex w-full max-w-[340px] flex-col items-center gap-4">
			<LegacyBarButton
				className="min-w-[180px] justify-center"
				label="Show Notification"
				onClick={() => {
					showLegacyNotification({
						body: "Can you review the latest build?",
						subtitle: "Ava",
						time: "now",
						title: "Messages",
					});
				}}
				variant="accent"
			/>
			<p className="text-center text-[#8b9bb4] text-sm leading-relaxed">
				Uses the exported helper, which renders the component through Sonner
				with <code>toast.custom</code>.
			</p>
		</div>
	);
}

Static Card

Render the same lock-screen card directly when you need a static example instead of a live toast.

Title

now

Subtitle

Body

"use client";

import { LegacyNotification } from "@/components/legacy-notification";
import { cn } from "@/lib/utils";

interface LegacyNotificationDemoProps {
	className?: string;
}

export function LegacyNotificationDemo({
	className,
}: LegacyNotificationDemoProps) {
	return (
		<div className={cn("flex w-full justify-center", className)}>
			<LegacyNotification
				body="Body"
				subtitle="Subtitle"
				time="now"
				title="Title"
			/>
		</div>
	);
}

Custom Icon

Swap the icon content and message copy while keeping the same glossy lock-screen shell.

Store

now

Support

Your order has left the warehouse.

Team Chat

Mention in design-crit

There is feedback on the latest mockup.

"use client";

import { MessageCircleIcon } from "lucide-react";

import { LegacyNotification } from "@/components/legacy-notification";

export function LegacyNotificationCustomIconExample() {
	return (
		<div className="flex w-full max-w-[320px] flex-col gap-3">
			<LegacyNotification
				body="Your order has left the warehouse."
				icon={<MessageCircleIcon strokeWidth={2.4} />}
				subtitle="Support"
				time="now"
				title="Store"
			/>
			<LegacyNotification
				body="There is feedback on the latest mockup."
				icon={<MessageCircleIcon strokeWidth={2.4} />}
				subtitle="Mention in design-crit"
				time="2m"
				title="Team Chat"
			/>
		</div>
	);
}

No Icon

Hide the icon slot when the notification should read as pure text instead of an app alert.

Build Passed

now

Deployment

Changes are ready to ship.

Sent

Direct Message

Your message was delivered successfully.

"use client";

import { LegacyNotification } from "@/components/legacy-notification";

export function LegacyNotificationNoIconExample() {
	return (
		<div className="flex w-full max-w-[320px] flex-col gap-3">
			<LegacyNotification
				body="Changes are ready to ship."
				showIcon={false}
				subtitle="Deployment"
				time="now"
				title="Build Passed"
			/>
			<LegacyNotification
				body="Your message was delivered successfully."
				showIcon={false}
				subtitle="Direct Message"
				time="1m"
				title="Sent"
			/>
		</div>
	);
}

API Reference

LegacyNotificationProps extends React.HTMLAttributes<HTMLDivElement> and adds title, subtitle, body, time, showIcon, and the visibility toggles for the subtitle and body lines.

Also inherits: React.HTMLAttributes<HTMLDivElement>

Prop	Type	Required
`body`	`string`	No
`icon`	`React.ReactNode`	No
`showIcon`	`boolean`	No
`showBody`	`boolean`	No
`showSubtitle`	`boolean`	No
`subtitle`	`string`	No
`time`	`string`	No
`title`	`string`	No

Notes

showLegacyNotification defaults to top-center, unstyled: true, and a 4.2 second duration so the Sonner output matches the lock-screen composition by default.
The default icon shell is intentionally generic, but you can pass any React node through icon when the product needs a branded glyph.
Set showIcon={false} when the layout should collapse into a pure text notification without the glossy app icon badge.

SABRAMAN