Components

Toaster

An opinionated toast notification component built on Sonner. Fires toasts from anywhere in your app without prop drilling.

example.tsx

About

AppToaster is a thin wrapper around Sonner — an opinionated, accessible toast library by Emil Kowalski. The wrapper pre-applies Viana Kit design tokens so toasts automatically match your theme without any extra configuration.

Import

tsx

import { AppToaster, sonnerToast } from "@/components/primitives/AppToaster"

Setup

Mount AppToaster once at the root of your app (e.g. in your root layout). This is the component that renders toasts — without it, calls to sonnerToast will have no effect.

tsx

// app/layout.tsx
import { AppToaster } from "@/components/primitives/AppToaster"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <AppToaster />
      </body>
    </html>
  )
}

Toast types

Call sonnerToast directly or use one of its named methods for semantic variants.

tsx

sonnerToast("Default toast")
sonnerToast.success("Saved successfully")
sonnerToast.error("Something went wrong")
sonnerToast.warning("Check your input")
sonnerToast.info("Update available")

With description

Pass a description in the options object to add a supporting line below the title.

example.tsx

Position

Set a default position globally on AppToaster, or override it per-call via the position option. Defaults to bottom-right.

example.tsx

API Reference

AppToaster wraps the Sonner Toaster with Viana Kit theme tokens pre-applied.

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	Where toasts appear on screen.
duration	number	4000	Auto-dismiss delay in milliseconds.
richColors	boolean	false	Use semantically colored backgrounds for success/error/warning/info.
closeButton	boolean	false	Show a close button on each toast.

Source

src/components/primitives/AppToaster.tsx

"use client"

import { Toaster as AppSonnerToaster, toast as appToast } from "sonner"

const AppToaster = () => {
  return (
    <AppSonnerToaster
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
    />
  )
}

export { AppToaster, appToast as sonnerToast }