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.')

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