Success Alert

success x dismiss

Green success alert with dismiss button. From Bundui.

alertsuccessgreenbundui

Changes saved successfully!

Code

alert-success.tsx

"use client";
import { useState } from "react";
import { Check } from "lucide-react";

export function SuccessAlert({ message = "Changes saved successfully!" }: { message?: string }) {
  const [show, setShow] = useState(true);
  if (!show) return null;
  return (
    <div className="flex items-center gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm">
      <Check className="size-4 shrink-0 text-emerald-500" />
      <span className="text-emerald-700 dark:text-emerald-300">{message}</span>
      <button onClick={() => setShow(false)} aria-label="Dismiss"
        className="ml-auto text-muted-foreground transition-colors hover:text-foreground">×</button>
    </div>
  );
}

Icons: npm i lucide-react

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Success Alert component and wire it to my accent.”