UIPackage
Vue React

Sonner

React feedback
Edit on GitHub

Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `sonner` library with the registry’s tokens applied.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/sonner.json

Or with the named registry: npx shadcn@latest add @uipkge-react/sonner

Examples

Dependencies

sonnernext-themes

Files (2)

  • components/ui/sonner/Sonner.tsx 1.5 kB 
    'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner, type ToasterProps } from 'sonner'
import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from 'lucide-react'

// Sonner cadence — UX_MICROINTERACTIONS.md research:
// 4000ms default, bottom-right position so swipe-right dismiss reads
// naturally, max 3 visible (older stack with scale offset), rich colors
// so success/error/info/warning each get distinct variants.
const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      data-uipkge=""
      data-slot="sonner"
      className="toaster group"
      position="bottom-right"
      duration={4000}
      visibleToasts={3}
      richColors
      closeButton={false}
      expand={false}
      style={
        {
          '--normal-bg': 'var(--popover)',
          '--normal-text': 'var(--popover-foreground)',
          '--normal-border': 'var(--border)',
          '--border-radius': 'var(--radius)',
        } as React.CSSProperties
      }
      icons={{
        success: <CircleCheckIcon className="size-4" aria-hidden="true" />,
        info: <InfoIcon className="size-4" aria-hidden="true" />,
        warning: <TriangleAlertIcon className="size-4" aria-hidden="true" />,
        error: <OctagonXIcon className="size-4" aria-hidden="true" />,
        loading: <Loader2Icon className="size-4 animate-spin" aria-hidden="true" />,
      }}
      {...props}
    />
  )
}

export { Toaster }
  • components/ui/sonner/index.ts 0 kB 
    export { Toaster } from './Sonner'

Raw manifest: https://react.uipkge.dev/r/react/sonner.json