Skip to content
uicoolkit

  • Components

  • Docs

↑↓ navigate↵ open/ anywhere
Menu

Browse

InteractionsVisualsPatternsFlows
GitHub

Notification Stack

FreeNewSample

Toasts collapse into a tidy deck and expand on hover or focus. Timers pause while someone is reading.

Original
  • feedback
  • toast
  • notifications
Invite acceptedPriya joined Acme Design.
PR mergedfeat: stateful button states
New comment“Love the spring on this.”

Customize

Accent
Motion
Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet
npx shadcn@latest add @uicoolkit/notification-stack

Install commands go live when this item ships to the registry.

Dependencies

  • motion

Use with an agent

Copy a prompt with this component, your current preview settings and links to its docs.

Add the UICoolKit "Notification Stack" component (notification-stack) to this project.
Docs: https://uicoolkit.com/components/notification-stack
Agent docs: https://uicoolkit.com/components/notification-stack.md
Install: npx shadcn@latest add @uicoolkit/notification-stack
Preview settings to match: accent Ember, radius 12px, motion on.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)
notification-stack.tsx
const { notify } = useNotifications();
notify({ title: "Invite sent", tone: "success" });