Sonner

An opinionated toast component for React. Supports promises, custom styling, and multiple types.

Sonner

import { toast, Toaster } from "@/components/optics/sonner";import { Button } from "@/components/optics/button";<div className="flex flex-wrap items-center justify-center gap-4">  <Button    onClick={onClick}    variant="success"  >    Success  </Button>  <Button    onClick={onClick}    variant="destructive"  >    Error  </Button>  <Button    onClick={onClick}    variant="info"  >    Info  </Button>  <Button    onClick={onClick}    variant="warning"  >    Warning  </Button>  <Button    onClick={onClick}    variant="raised"  >    Promise  </Button></div>

import { toast, Toaster } from "@/components/optics/sonner";import { Button } from "@/components/optics/button";<div className="flex flex-wrap items-center justify-center gap-4">  <Button    onClick={onClick}    variant="success"  >    Success  </Button>  <Button    onClick={onClick}    variant="destructive"  >    Error  </Button>  <Button    onClick={onClick}    variant="info"  >    Info  </Button>  <Button    onClick={onClick}    variant="warning"  >    Warning  </Button>  <Button    onClick={onClick}    variant="raised"  >    Promise  </Button></div>

Installation

pnpm dlx shadcn@latest add @optics/sonner

Props

toast()

Name	Type
type	"success" \| "error" \| "info" \| "warning" \| "promise"
title	string
description	string
button	{ label: string, onClick: () => void }
promise	Promise
loading	string (for promise type)
success	string (for promise type)
duration	number (default: 5500)

Slider Spinner

Sonner

Show Code

Installation

Props