# Toaster
import ToasterDefault from "@/components/nexus-ui/examples/toaster/default";
import ToasterWithDescription from "@/components/nexus-ui/examples/toaster/with-description";
import ToasterWithAction from "@/components/nexus-ui/examples/toaster/with-action";
import ToasterVariantsRow from "@/components/nexus-ui/examples/toaster/variants-row";
import ToasterPosition from "@/components/nexus-ui/examples/toaster/position";
Headless toast notifications with variant-aware styling and custom action/cancel controls; Powered by [Sonner](https://sonner.emilkowal.ski/).
Installation [#installation]
Run the following command:
```bash
npx shadcn@latest add @nexus-ui/toaster
```
Add the
`Toaster`
component
```tsx title="app/layout.tsx"
import { Toaster } from "@/components/nexus-ui/toaster"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Install the following dependencies:
```bash
npx shadcn@latest add button && npm install @hugeicons/core-free-icons @hugeicons/react next-themes sonner
```
Copy and paste the following code into your project.
Add the
`Toaster`
component
```tsx title="app/layout.tsx"
import { Toaster } from "@/components/nexus-ui/toaster"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Usage [#usage]
```tsx keepBackground noLineNumbers
import { toast } from "@/components/nexus-ui/toaster";
```
```tsx keepBackground noLineNumbers
toast.default("Event has been created.");
```
Examples [#examples]
With Description [#with-description]
Add supporting copy with the `description` option.
With Action [#with-action]
Add an inline CTA using the `action` option.
Variants [#variants]
Change the variant on each toast call to control the feedback type and visual style.
Position [#position]
Show toasts in different corners and center positions using per-toast `position`.
API Reference [#api-reference]
toast [#toast]
Custom headless toast helper built on `sonnerToast.custom`. It renders the `Toast` UI while forwarding supported Sonner toast options for behavior and lifecycle.
void }",
description:
"Optional custom action button rendered inside the toast card.",
},
cancel: {
type: "{ label: React.ReactNode; onClick?: () => void }",
description:
"Optional secondary cancel button rendered inside the toast card.",
},
duration: {
type: "number",
default: "4000",
description:
"Auto-dismiss duration in milliseconds. Use `Infinity` to keep toast open.",
},
id: {
type: "string | number",
description: "Custom toast id for updates/deduping.",
},
position: {
type: '"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"',
description: "Override destination stack position for this toast.",
},
toasterId: {
type: "string",
description: "Route toast to a specific mounted toaster.",
},
dismissible: {
type: "boolean",
default: "true",
description: "Whether the toast can be dismissed by interaction.",
},
onDismiss: {
type: "() => void",
description: "Called when toast is dismissed.",
},
onAutoClose: {
type: "() => void",
description: "Called when toast closes from timeout.",
},
invert: {
type: "boolean",
default: "false",
description: "Use Sonner inverted styling mode where applicable.",
},
closeButton: {
type: "boolean",
default: "true",
description:
"Show/hide the custom toast close button for this toast instance.",
},
testId: {
type: "string",
description: "Testing identifier attached to toast node.",
},
}}
/>
Toaster [#toaster]
Custom wrapper that mounts Sonner and syncs `theme` from `next-themes`, with `toastOptions={{ unstyled: true }}` by default.
For advanced usage and full configuration options, see the [Sonner docs](https://sonner.emilkowal.ski/).