# Notification Stack

> An iOS-style lock-screen notification stack where collapsed and expanded are the same DOM and the same transform — tap to unfold, swipe a tile onto Clear, and watch the survivors close the gap.

- Category: Notification
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: stack
- Page: https://builder.atheros.ai/components/notification-stack
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_notification_stack/preview-215af8792faf.webp

## Features

- Collapsed and expanded are the same transform: every tile position is `--nst-i` multiplied by either `--nst-row` (list) or `--nst-peek` (stack), so one index rewrite drives unfolding, restacking, delivering and clearing
- Painted-glass tiles: each card paints the slab's own wallpaper at its own offset under a dark-ink tint, a hairline rim and an inset highlight — frosted glass with nothing sampled and no `backdrop-filter`
- Two-stage iOS swipe: a short drag rests the row open on a stationary Clear drawer, a long drag past 55% of the row clears outright, and dragging back closes it
- Tap-to-expand on any tile, tap the empty wallpaper to collapse, and a segmented `Stacked` / `List` control that drives the same state
- `Deliver` adds a notification from a rotating pool onto the front of the stack with a spring entrance and a one-shot bell ring, capped at five tiles
- A lock-screen header — a tabular-numeral clock and the date — sits above the stack, decorative (`aria-hidden`) and never in the tab order
- Five fixed slots keep the frame from reflowing; the live cluster re-centres itself inside the box as tiles arrive and leave
- Buried tiles under a collapsed stack are `inert` and drop out of the hit-test, so no focus lands inside the pile and a tap on a peeking sliver reaches the wallpaper and unfolds it
- An "All caught up" empty state and a live tile count that rides the cluster down as it unfolds
- Keyboard support: Enter or Space activates a tile, Backspace or Delete clears the focused tile and moves focus to its neighbour, Escape closes an open drawer then collapses the stack
- Respects `prefers-reduced-motion` — the intro unfold is skipped, entrances land in place and every transition collapses

## Accessibility

- **Live region** — `role="list"` with `aria-live="polite"` on the stack, so arriving and leaving notifications are announced
- **Notification rows** — `role="listitem"` wrappers around a real `<button>` whose `aria-label` names the app, the message and the time
- **Clear action** — A real `<button>` with an explicit `aria-label`, held `inert` while the drawer is closed
- **Stack state** — Segmented `<button>` pair with `aria-pressed` kept in sync with the collapsed state
- **Collapse target** — The empty wallpaper is a decorative `aria-hidden` div — the accessible path to expand and collapse is the segmented control and Escape
- **Empty state** — "All caught up" is exposed to assistive tech (only its bell glyph is `aria-hidden`) and is toggled with `visibility`, so it reaches the accessibility tree exactly while the stack is empty
- **Buried tiles** — Layers under a collapsed stack are `inert` and drop out of the hit-test, so no focus ever lands on a tile hidden inside the pile and overlapping tiles never compete for the same tap; expanding restores them to the tab order
- **Focus indicators** — `:focus-visible` outline in `--ring` on every control
- **Touch targets** — Segment buttons and Deliver floored at `--buttons-height-small`; tiles are a full row tall
- **Decorative content** — App icons, the pinwheel, the hint and the empty state are `aria-hidden="true"`
- **Reduced motion** — `prefers-reduced-motion: reduce` skips the intro unfold and collapses every transition

## Keyboard shortcuts

- `Tab` — Move between notification tiles and the controls
- `Enter` — Activate the focused tile — expands a collapsed stack, closes an open drawer
- `Backspace` — Clear the focused notification and move focus to its neighbour
- `Delete` — Clear the focused notification and move focus to its neighbour
- `Escape` — Close an open Clear drawer, otherwise collapse the stack

## Common questions

**Which frameworks is Notification Stack available in?**

Notification Stack ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Notification Stack free?**

Yes. Notification Stack is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Notification Stack support dark mode?**

Yes. Notification Stack ships light and dark themes. Switch the preview to dark mode to compare them.

## Get the code

Preview Notification Stack live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/notification-stack

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt