Things

The Sonner component provides a toast notification system for displaying temporary messages. It supports multiple variants (success, info, warning, error), actions, promises, and customizable positioning. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/sonner.json

Usage

tsx

import { Toaster, useToast } from "@/components/ui/sonner"

function MyComponent() {
  return (
    <Toaster>
      <ToastButton />
    </Toaster>
  )
}

function ToastButton() {
  const { toast } = useToast()

  return (
    <button
      onClick={() => {
        toast({
          title: "Event has been created",
          description: "Sunday, December 03, 2023 at 9:00 AM",
        })
      }}
    >
      Show Toast
    </button>
  )
}

Sonner

Quick Install

Usage

Examples

Default

Success

Info

Warning

Error

Action

Cancel

Promise