Xzero UI
Pro library
Special componentsSocial proof toast

Social proof toastPro

A stack of social proof notifications for landing and pricing pages, where recent trials, upgrades and verified purchases from people and companies arrive every few seconds. The stack pauses and fans out on hover, and visitors can dismiss any toast.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/social-proof-toast
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/social-proof-toast

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { SocialProofToast } from "@/components/xzero/social-proof-toast/social-proof-toast";
import type { SocialProofEvent } from "@/components/xzero/social-proof-toast/social-proof-toast";
import { LinearMark } from "@/components/xzero/social-proof-toast/social-proof-toast-marks";

const events: SocialProofEvent[] = [
  { id: "1", name: "Sofia", action: "started a Pro trial", meta: "Madrid", time: new Date(Date.now() - 2 * 60_000), avatar: "/people/sofia.jpg" },
  { id: "2", name: "Linear", action: "upgraded to Business", meta: "48 seats", time: Date.now() - 4 * 60_000, logo: <LinearMark />, verified: "Verified by Stripe" },
];

export function Landing() {
  return <SocialProofToast events={events} position="bottom-left" limit={6} onShow={event => console.log("shown", event.id)} />;
}

API reference

SocialProofToast

Stacked social proof notifications for a landing or pricing page. Toasts cycle on an interval, pause and fan out on hover or focus, and can be dismissed. With no props it plays a sample SaaS feed.

PropTypeDefaultDescription
eventsSocialProofEvent[]sampleSocialProofEventsThe feed, oldest first. Each event is { id, name, action, meta?, time?, avatar?, logo?, verified? }. A Date or timestamp time renders as relative time; a string renders as is.
intervalnumber4000Milliseconds between toasts. The countdown keeps its remaining time across hover and focus pauses.
initialDelaynumber800Milliseconds before the first toast.
maxVisiblenumber3How many toasts stack at once. Older ones fade out from the back.
prefillnumber0How many toasts already show on mount, without an entrance. Useful for previews and screenshots.
position"inline" | "bottom-left" | "bottom-right" | "top-left" | "top-right""inline"Inline sits in the layout. The corners pin the stack to the viewport, 24px from the edges (16px and full width on phones). Top positions stack downward.
expandOnHoverbooleantrueFans the stack out while it is hovered or holds focus.
loopbooleantrueStarts the feed over when it ends. False stops after the last event.
limitnumber–Stops after this many toasts in a session, so the page stays calm.
pausedbooleanfalsePauses the cycle from outside, for example while a modal or cookie banner is open.
onShow(event: SocialProofEvent) => void–Called each time a toast appears, for impression tracking.
onDismiss(event: SocialProofEvent) => void–Called when a visitor dismisses a toast.
onSelect(event: SocialProofEvent) => void–Makes each toast a button, for example to open pricing or a customer story.
labelstring"Recent activity"Accessible name of the region.
classNamestring–Class on the root region.

SocialProofEvent

One entry in the feed.

PropTypeDefaultDescription
id (required)string–Stable id, used for keys and callbacks.
name (required)string–A first name or a company, shown in medium weight.
action (required)string–What they did, read after the name: "started a Pro trial".
metastring–Short context before the time, such as a city or a seat count.
timeDate | number | string–When it happened. Dates render as Just now, 4 min ago, 2 h ago.
avatarstring–Portrait URL for a person.
logoReactNode–A company mark drawn in currentColor, rendered at 18px in the round slot when there is no avatar. Initials show when neither is set.
verifiedboolean | string–Shows a check badge with a label. True reads Verified; pass a string such as Verified by Stripe.

Keyboard interactions

KeysAction
TabMoves to the dismiss button of each visible toast. Focus inside the stack pauses it and fans it out.
Enter / SpaceDismisses the focused toast, or selects it when onSelect is set.
EscapeDismisses the focused toast, or the front one. Focus moves to the next toast.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in ai

Guidance for AI tools

Social proof toast: A stack of social proof notifications for landing and pricing pages, where recent trials, upgrades and verified purchases from people and companies arrive every few seconds. The stack pauses and fans out on hover, and visitors can dismiss any toast. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components