Sonner 2

PreviousNext

A toast notification with title and description for detailed information

Docs
shadcn-studiocomponent

Preview

Loading preview…
registry/new-york/components/sonner/sonner-02.tsx
'use client'

import { toast } from 'sonner'

import { Button } from '@/registry/new-york/ui/button'

const SonnerWithDescriptionDemo = () => {
  return (
    <Button
      variant='outline'
      onClick={() =>
        toast('Event is created', {
          description: 'Friday, August 15, 2025 at 9:00 AM'
        })
      }
    >
      Toast with description
    </Button>
  )
}

export default SonnerWithDescriptionDemo

Installation

npx shadcn@latest add @shadcn-studio/sonner-02

Usage

import { Sonner02 } from "@/components/sonner-02"
<Sonner02 />