@zuilib/toast

Toast notifications for ZUI Design System - a wrapper around Sonner that integrates seamlessly with ZUI design tokens.

Installation

pnpm add @zuilib/toast

Usage

1. Add the Toaster component to your app root

import { Toaster } from '@zuilib/toast'
import '@zuilib/toast/styles.css'

function App() {
  return (
    <>
      <Toaster />
      <YourApp />
    </>
  )
}

2. Use the toast function anywhere

import { toast } from '@zuilib/toast'

function MyComponent() {
  return (
    <div>
      <button onClick={() => toast('Hello World!')}>
        Show Info Toast
      </button>

      <button onClick={() => toast.success('Operation successful')}>
        Show Success Toast
      </button>

      <button onClick={() => toast.error('Something went wrong')}>
        Show Error Toast
      </button>
    </div>
  )
}

API

Simple API

• toast() - Default info toast (neutral, card-like appearance)
• toast.success() - Success toast (uses --success design token)
• toast.error() - Error toast (uses --destructive design token)

Advanced Usage

All Sonner features are available:

// With description
toast('Event created', {
  description: 'Your event has been scheduled for tomorrow',
})

// With action button
toast('Event created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo'),
  },
})

// Custom duration
toast('This will disappear quickly', {
  duration: 1000,
})

// Promise-based toasts
toast.promise(fetchData(), {
  loading: 'Loading...',
  success: 'Data loaded',
  error: 'Failed to load',
})

Theming

The toast package automatically uses ZUI design tokens. Customize toast appearance by overriding these CSS variables:

:root {
  /* Info toast (default toast()) */
  --info: #f9fafb;
  --info-foreground: #0a0a0a;
  --info-border: #e4e4e7;

  /* Success toast */
  --success: #22c55e;
  --success-foreground: #ffffff;

  /* Error toast */
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
}

Dark mode is automatically supported via the .dark class.

Toaster Props

<Toaster
  theme="light" // 'light' | 'dark' | 'system'
  position="bottom-right" // Position of toasts
  duration={4000} // Default duration in ms
  closeButton={true} // Show close button
  // ... all Sonner Toaster props are supported
/>

Full Sonner Documentation

For complete API documentation, visit Sonner docs.