Sonner - Supabase — ContextQMD

About

Sonner is built and maintained by emilkowalski_.

Installation

<Steps>

<Step>Install the following dependencies:</Step>

bash

npm install sonner next-themes

<Step>Copy and paste the following code into your project.</Step>

<Step>Add the Toaster component</Step>

tsx

import { Toaster } from '@/components/ui/sonner'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

</Steps>

Usage

tsx

import { toast } from 'sonner'

tsx

toast('Event has been created.')

When to use

Use a toast for short-lived, non-blocking feedback or to confirm an operation after its originating surface has closed or navigated away.

Do not use a toast as the only feedback for:

Field validation. Use FormMessage or FieldError beside the field.
A failed submission that leaves the form or interstitial visible. Show a role="alert" message in destructive text near the actions.
A blocking or materially changed page state. Use an inline state component such as Admonition or ErrorDisplay.

Keep error copy specific and include the next step when it is not obvious.

Expand

You can change the amount of toasts visible through the visibleToasts prop.

tsx

<Toaster expand={true | false} />

You can use the Input below to try it out.

Position

You can change the amount of toasts visible through the visibleToasts prop.

tsx

<Toaster
  position={
    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
  }
/>

You can use the Input below to try it out.

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

Upload example