Toast stack

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<UiToastStack trigger />

Installation#

pnpm dlx shadcn@latest add @lumesec/ui-toast-stack

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/ui-toast-stack.json

Usage#

"use client";

import * as React from "react";

import { UiToastStack, type UiToastStackHandle } from "@/components/lumesec/ui-toast-stack";

export function Example() {
  const toasts = React.useRef<UiToastStackHandle>(null);
  return (
    <div className="grid gap-3">
      <UiToastStack ref={toasts} trigger={false} />
      <button
        type="button"
        onClick={() => toasts.current?.show({ title: "Saved", description: "All changes are stored.", tone: "success" })}
      >
        Save
      </button>
    </div>
  );
}

Behaviour#

New toasts spring up from below and older ones tuck in behind. Hovering fans the stack out and pauses the timers; swipe a toast sideways to throw it away.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref receives a UiToastStackHandle handle with these methods.

Keyboard#

Accessibility#

• Toasts are placed in an element with role="region", aria-label="Notifications" and aria-live="polite"; each toast has role="status".
• Each toast has a native dismiss button labelled "Dismiss". Buttons on toasts hidden at the back of the stack are taken out of the tab order.
• Moving focus into the stack expands it and pauses the timers, as hovering does.
• Swiping is pointer-only; the dismiss button is the keyboard path.
• Reduced motion: toasts appear, fan out, settle and leave without transitions; a swipe still follows the pointer.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --card, --muted, --border, --foreground, --muted-foreground, --lumesec, --lumesec-success, --lumesec-warning and --destructive.

Notes#

• Ships with six sample toasts (published, copied, connector added, upload failed, memory updated, files uploaded) that show() cycles through when called without an argument.
• Each toast lives 5 s, and timers pause while the stack is expanded or a toast is held. At most five toasts are kept and three are visible; a sixth removes the oldest.
• A swipe of more than 80 px, or a fast flick, throws the toast away. The stack area is 196 px tall and up to 340 px wide.