Stack Notifications

New

Toasts that stack as a deck and fan out on hover

$ npx @hritik-sharmaa/repeat-ui add commons-stack-notifications
Category
Commons
Added
Nov 1, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview

Payment received

$120 from Acme Inc.

New comment

Maya: the dock looks great!

Deployed to production

repeat-ui.vercel.app is live.

Customize
3
340px
import CommonsStackNotifications from "@/components/repeat-ui/commons-stack-notifications/preview";

<CommonsStackNotifications notifications={notifications} onDismiss={dismiss} />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-stack-notifications --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/commons-stack-notifications/.

    import CommonsStackNotifications from "@/components/repeat-ui/commons-stack-notifications/preview";

export default function Page() {
  return <CommonsStackNotifications />;
}

Props

PropTypeDefaultDescription
notificationsStackNotification[]-{ id, title, description?, icon? }, oldest first.
onDismiss(id: string | number) => void-Called when one is dragged away or closed.
maxVisiblenumber3How many show at once.
widthnumber340Card width in pixels.
expandOnHoverbooleantrueFan the stack out into a list on hover.
accentColorstring"#fa5f1b"Icon colour.
backgroundstring"#171717"Card background.
textColorstring"#fafafa"Text colour.
classNamestring""Extra classes for the root element.

More commons

See all
AccordianAccordion component with smooth expand/collapse animations
Document Upload ModalDocument upload modal with drag and drop support
Search BarSearch bar component with keyboard shortcuts (Ctrl+K) and modal support