Lock screen notificationPro

A phone lock screen with stacked agent notifications that fan out into a list with their actions.

Markdown

On this page

ProAgent notifications land one by one and stack. Tap the stack to fan it out with each notification's actions.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/lock-screen-notification

Usage

tsx

import { LockScreen } from "@/components/ui/chatcn/pro/lock-screen-notification"
import { PhoneFrame, PhoneStatusBar } from "@/components/ui/chatcn/pro/phone-frame"

<PhoneFrame width={320} screenClassName="dark" statusBar={<PhoneStatusBar time="" />}>
  <LockScreen
    time="10:24"
    date="Thursday 29 October"
    wallpaper="/wallpaper.webp"
    notifications={[{ id: "tests", app: "Coding agent", status: "success", time: "now", body: "Tests passed…" }]}
  />
</PhoneFrame>

LockScreen is the screen, not the phone: put it in PhoneFrame with screenClassName="dark" so the status bar and home indicator read on the wallpaper. Everything inside is dark themed, like a lock screen over a photo, on light and dark pages alike. Newest first: the front card is the newest, with up to two edges peeking under it. Tap the stack to open it into a list with each notification's actions.

Cards are a near opaque surface over a darkened wallpaper, with no blur, so they stay crisp and cheap. A status badge on the app tile (green check, red cross, amber alert) always comes with a word for screen readers.

Examples

Open, single and empty

ProThe stack open with every action, a single notification, and a quiet lock screen, on three finishes.

Props

Prop	Type	Notes
`notifications`	`LockScreenNotificationData[]`	Newest first
`time`	`string`	The clock. Default `10:24`
`date`	`string`	Over the clock
`wallpaper`	`string`	An image URL. Without one, a quiet dark ground
`expanded`	`boolean`	The open stack. Controlled. `defaultExpanded`, `onExpandedChange`
`controls`	`boolean`	The two round buttons at the bottom. Default true

LockScreenNotificationData

Field	Type	Notes
`id`	`string`
`app`	`string`	The card title, for example Coding agent
`icon`	`ReactNode`	The tile glyph
`status`	`"success" \| "error" \| "attention"`	The tile badge
`time`	`string`	For example `now` or `4m ago`
`body`	`string`	Two lines when stacked, in full when open
`actions`	`{ label, onSelect? }[]`	Buttons in the open list

Keyboard

Key	Action
`Enter` / `Space` on the stack	Opens it
`Tab`	Moves through the actions, then Show less
`Enter` on Show less	Folds the stack and returns focus to it

Accessibility

The closed stack is one button whose name starts with the front card's text, then how many more are under it.
A new notification is announced once in a polite live region, after the first paint.
The clock, the wallpaper and the round shortcuts are decorative.

Motion

A new notification slides in from above and from 0.96 in 280 ms. The first paint never animates.
Opening by pointer fans the cards out with a 30 ms stagger; from the keyboard the list appears at once.
Under reduced motion both are opacity only.