Glass Notifications
A glass notification stack that fans out on hover or focus, with a light that follows the cursor.
Overview
Notifications rest as a stack: the newest on top, the next two peeking behind it, narrower and fainter. Hover, focus or tap and the stack fans out on a spring so every card is readable.
Each card is frosted glass with a hairline edge and an inner highlight; a soft light follows the pointer across the stack. Dismiss a card and it slides away while the rest close the gap; an empty stack says so.
When to use
- Lock-screen or overlay notifications in apps with photographic or video backgrounds.
- Activity feeds floating over a hero.
When not to use
- Transient confirmations on plain pages: use Toast Stack.
- Long, actionable inboxes: use Notification Center.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/glass-notifications.jsonnpx shadcn@latest add https://sundaeui.dev/r/glass-notifications.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/glass-notifications.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/glass-notifications.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy glass-notifications.tsx and glass-notifications.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { GlassNotifications } from '@/components/sundae/glass-notifications'
<GlassNotifications
items={[
{ id: '1', app: 'Messages', title: 'Maya', body: 'Landed! See you in 20.', time: 'now', icon: '/apps/messages.png' },
{ id: '2', app: 'Calendar', title: 'Design review', body: 'Starts in 15 minutes', time: '9:45', icon: '#ff6a55' },
]}
onDismiss={markRead}
/>Props
| Prop | Type | Default |
|---|---|---|
items*Newest first. icon is an image URL or a colour. | { id, app, title, body, time, icon? }[] | — |
defaultExpandedStart fanned out. | boolean | false |
onDismissCalled after a card is dismissed. | (id: string) => void | — |
tintGlass tint. | 'clear' | 'smoke' | 'clear' |
Accessibility
- An ordered list labelled with the count; each card is an article named by app and title.
- The stack opens on keyboard focus as well as hover; cards hidden behind the top card are aria-hidden until it opens.
- Dismiss buttons are labelled per notification; reduced motion removes the spring and slide.
Customization
- Card height, gap, blur and colours are CSS custom properties on .sd-gnot (--gn-h, --gn-gap, --gn-blur…).
FAQ
- Is Glass Notifications free?
- Glass Notifications is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Glass Notifications?
- Run npx shadcn@latest add https://sundaeui.dev/r/glass-notifications.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Glass Notifications support keyboard and screen readers?
- An ordered list labelled with the count; each card is an article named by app and title. The stack opens on keyboard focus as well as hover; cards hidden behind the top card are aria-hidden until it opens.
- Does Glass Notifications respect reduced motion?
- Dismiss buttons are labelled per notification; reduced motion removes the spring and slide.
More like this
All components →- Pro
Glass Control Center
Components · Refined - Pro
Glass Segmented
Components · Refined Toast Stack
Components · Refined- Pro
Notification Center
Components · Refined Permission Prompt
Components · Refined- Pro
Sheet Drawer
Components · Refined