LLM index: /llms.txt
Toast notifications powered by Sonner.
"use client";
import { toast } from "sonner";
import { Toaster } from "@/components/nexus-ui/toaster";
import { Button } from "@/components/ui/button";
const ToasterDefault = () => {
return (
<div className="flex min-h-24 w-full items-center justify-center">
<Button type="button" onClick={() => toast.success("Toast sent successfully")}>
Show toast
</Button>
<Toaster />
</div>
);
};
export default ToasterDefault;
Installation
CLIManual
npx shadcn@latest add @nexus-ui/toasterpnpm dlx shadcn@latest add @nexus-ui/toasteryarn dlx shadcn@latest add @nexus-ui/toasterbunx shadcn@latest add @nexus-ui/toasterInstall the following dependencies:
npm install @hugeicons/core-free-icons @hugeicons/react next-themes sonnerpnpm add @hugeicons/core-free-icons @hugeicons/react next-themes sonneryarn add @hugeicons/core-free-icons @hugeicons/react next-themes sonnerbun add @hugeicons/core-free-icons @hugeicons/react next-themes sonnerCopy and paste the following code into your project.
"use client"
import {
Alert02Icon,
CheckmarkCircle01Icon,
InformationCircleIcon,
Loading03Icon,
OctagonXIcon,
} from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
icons={{
success: (
<HugeiconsIcon icon={CheckmarkCircle01Icon} strokeWidth={2} className="size-4" />
),
info: <HugeiconsIcon icon={InformationCircleIcon} strokeWidth={2} className="size-4" />,
warning: <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4" />,
error: <HugeiconsIcon icon={OctagonXIcon} strokeWidth={2} className="size-4" />,
loading: <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className="size-4 animate-spin" />,
}}
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
"--border-radius": "var(--radius)",
} as React.CSSProperties
}
{...props}
/>
)
}
export { Toaster }
Update import paths to match your project setup.
Usage
import { toast } from "sonner";
import { Toaster } from "@/components/nexus-ui/toaster";<Toaster />toast.success("Saved");
toast.info("New update available");
toast.warning("Connection is unstable");
toast.error("Request failed");
toast.loading("Syncing...");API Reference
Toaster
Wrapper around Sonner's Toaster with theme sync and Nexus default icons/styles. Accepts all ToasterProps.
Prop
Type