Components
Loading preview...
The AlertBadge component is a modern, interactive notification badge designed for developers and dashboards. Unlike traditional toasts, it displays a live counter with alert messages in a compact, floating style. It supports multiple types such as success, error, info, and warning, each with corresponding colors and icons. The component is fully reusable and configurable through props, allowing developers to set default counts, labels, and auto-dismiss durations. Users can increment, decrement, or clear the count dynamically, making it perfect for live notifications, message counters, or real-time alerts in web applications. Its clean design and flexible behavior provide both usability and aesthetic appeal, making it a powerful utility for modern interfaces.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/alert-badgeimport AlertBadge from "@/components/ui/alert-badge";
export default function DemoOne() {
return <AlertBadge />;
}