Toaster

A toast notification system built on Sonner that provides customizable toast messages with themes, actions, and promise support.

Usage

The Toaster component provides a complete toast notification system. You'll need to add the <Toaster /> component to your app layout and use the toast function to trigger notifications.

Setup

import { Toaster } from "@unkey/ui";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

Basic Usage

import { toast } from "@unkey/ui";
 
export default function MyComponent() {
  const handleClick = () => {
    toast("This is a toast notification");
  };
 
  return (
    <button onClick={handleClick}>
      Show Toast
    </button>
  );
}

Examples

Basic Toast

Click the button above to trigger a basic toast notification

Toast Variants

Different toast types for different scenarios

Toast with Description

Toasts can include both a title and description for more detailed information

Toast with Actions

Toasts can include action buttons for user interaction

Custom Duration

Control how long toasts stay visible with the duration option

Promise Toast

Show loading, success, and error states for async operations

Props

Toaster Component

The <Toaster /> component accepts all props from Sonner's Toaster component.

Prop	Type	Default	Description
`theme`	`"light" \| "dark" \| "system"`	`"system"`	The theme for the toaster (automatically set from next-themes).
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"top-right"`	The position where toasts appear.
`expand`	`boolean`	`false`	Whether to expand the toaster when there are multiple toasts.
`richColors`	`boolean`	`false`	Whether to use rich colors for different toast types.
`closeButton`	`boolean`	`false`	Whether to show a close button on toasts.

Toast Function

The toast function is used to trigger toast notifications with various options.

Toast Options

Option	Type	Default	Description
`description`	`string`	-	Additional description text below the title.
`duration`	`number \| Infinity`	`4000`	How long the toast stays visible (in milliseconds).
`action`	`{ label: string; onClick: () => void }`	-	Action button configuration.
`cancel`	`{ label: string; onClick: () => void }`	-	Cancel button configuration.
`id`	`string`	-	Unique identifier for the toast.
`dismissible`	`boolean`	`true`	Whether the toast can be dismissed.

Styling

The Toaster component uses CSS custom properties and Tailwind classes for styling:

Background: Uses bg-background with proper theming
Text: Uses text-content for primary text and text-content-subtle for descriptions
Borders: Uses border-border for consistent border styling
Shadows: Uses shadow-lg for elevation
Action buttons: Use bg-primary and text-primary-foreground
Cancel buttons: Use bg-secondary and text-content-subtle

Integration with Next.js

The Toaster component is designed to work seamlessly with Next.js and next-themes:

Automatically detects and applies the current theme
Works with both client and server components
Supports SSR without hydration issues
Integrates with Next.js app router

Toaster

On this page