Sonner

An opinionated toast component for React.

Docs

Dependencies

sonner: v1.5.0

next-themes: v0.3.0

About

Sonner is built and maintained by @emilkowalski_.

Installation

Install the dependencies

Install the sonner and next-themes package.

npm install sonner next-themes

Copy-paste the component

Copy and paste the component code in a .tsx file.

'use client';
 
import { clsx } from 'clsx/lite';
import { useTheme } from 'next-themes';
import { Toaster as Sonner } from 'sonner';
import { tv } from 'tailwind-variants';
 
const sonnerStyles = tv({
  slots: {
    base: 'toaster group',
    toast: clsx(
      'toast group',
      'group-[.toaster]:border-grey-line group-[.toaster]:bg-grey-base group-[.toaster]:text-grey-text-contrast group-[.toaster]:shadow-lg',
    ),
    description: 'group-[.toast]:text-grey-text',
    actionButton: clsx(
      'group-[.toast]:data-[button]:h-8 group-[.toast]:data-[button]:rounded-lg group-[.toast]:data-[button]:bg-primary-solid group-[.toast]:data-[button]:px-2.5 group-[.toast]:data-[button]:text-grey-base group-[.toast]:data-[button]:transition-colors group-[.toast]:data-[button]:duration-200',
      'group-[.toast]:data-[button]:hover:bg-primary-solid-hover',
      'group-[.toast]:data-[button]:focus-visible:ring-4 group-[.toast]:data-[button]:focus-visible:ring-primary-focus-ring',
    ),
    cancelButton: clsx(
      'group-[.toast]:data-[button]:h-8 group-[.toast]:data-[button]:rounded-lg group-[.toast]:data-[button]:border group-[.toast]:data-[button]:border-solid group-[.toast]:data-[button]:border-grey-border group-[.toast]:data-[button]:bg-grey-base group-[.toast]:data-[button]:px-2.5 group-[.toast]:data-[button]:text-grey-text-contrast group-[.toast]:data-[button]:transition-colors group-[.toast]:data-[button]:duration-200',
      'group-[.toast]:data-[button]:hover:border-grey-border-hover group-[.toast]:data-[button]:hover:bg-grey-bg-subtle',
      'group-[.toast]:data-[button]:active:bg-grey-bg',
      'group-[.toast]:data-[button]:focus-visible:ring-4 group-[.toast]:data-[button]:focus-visible:ring-grey-focus-ring',
    ),
  },
});
 
const { base, toast, description, actionButton, cancelButton } = sonnerStyles();
 
type ToasterProps = React.ComponentProps<typeof Sonner>;
 
/**
 * Toaster component that provides a way to display toast notifications.
 *
 * @param {ToasterProps} props - The props for the Toaster component.
 *
 * @example
 * toast('Event has been created.');
 *
 * @see {@link https://dub.sh/ui-toaster Toaster Docs} for further information.
 */
export const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme();
 
  return (
    <Sonner
      className={base()}
      theme={theme as ToasterProps['theme']}
      toastOptions={{
        classNames: {
          toast: toast(),
          description: description(),
          actionButton: actionButton(),
          cancelButton: cancelButton(),
        },
      }}
      {...props}
    />
  );
};

Update import paths

Update the @kosori/ui import paths to fit your project structure, for example, using ~/components/ui.

Add Toaster component

Add the <Toaster /> component to the root of your app.

app/layout.tsx

import { Toaster } from '~/components/ui/sonner'; 
 
export default const RootLayout = ({ children }) => {
  return (
    <html lang='en'>
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  );
}

Usage

import { toast } from 'sonner';

toast('Event has been created.');