Components
Loading preview...
This SmartNotifyButton component is a flexible, reusable, and developer-friendly notification trigger built with Sonner and React. It allows developers to quickly display toasts with customizable messages, descriptions, types (success, error, info), and optional action buttons like Undo or Retry. The component comes with default props, making it plug-and-play, but also provides full flexibility to adjust toast duration, button style, and position anywhere on the screen (top-right, top-left, bottom-right, bottom-left). By combining a simple API with powerful customization, it transforms standard toast notifications into a smart, interactive, and highly adaptable tool suitable for dashboards, forms, and any developer-facing UI.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/smart-notify-buttonimport SmartNotifyButton from "@/components/ui/smart-notify-button";
export default function DemoOne() {
return (
<div className="flex flex-col gap-6">
<SmartNotifyButton />
<SmartNotifyButton
label="Save Changes"
message="Data saved successfully!"
description="Your changes have been stored."
type="success"
actionLabel="Undo"
actionCallback={() => console.log("Undo clicked")}
position="bottom-left"
/>
</div>
);
}