Effects

Status Toast Stack

A stacked notification pattern for build, deploy, and sync events.

toaststatusfeedback

Installation

Copy and paste the code into your project.

Accessibility notes

Announce new toast messages with an aria-live region in the app shell.

Build passed

Preview deployed

Docs synced

Preview accent

TypeScript

const toasts = [
  { label: "Build passed", color: "bg-[#40E0D0]" },
  { label: "Preview deployed", color: "bg-[#a78bfa]" },
  { label: "Docs synced", color: "bg-[#fb923c]" },
];

export function StatusToastStack() {
  return (
    <div className="grid w-full max-w-xs gap-2">
      {toasts.map((toast) => (
        <div key={toast.label} className="flex items-center gap-3 rounded-lg border border-white/12 bg-white/[0.06] px-4 py-3 shadow-xl backdrop-blur">
          <span className={`h-2.5 w-2.5 rounded-full ${toast.color}`} />
          <span className="text-sm font-semibold text-white">{toast.label}</span>
        </div>
      ))}
    </div>
  );
}

Usage

<StatusToastStack />

Related components

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

Loaders

Glow Loader

Beginner

A three-dot animated loader with turquoise, violet, and warm orange glow accents.

loaderanimationstatus

View component

Badges

Notification Bell

Beginner

A glass notification trigger with a warm unread indicator.

notificationbellstatus

View component