Components

Toast

Top-center glass notifications with pill formation, soft stacking, and Sonner accessibility.

Send a notification. A glass pill forms at the top of the window.

Installation

pnpm dlx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-sonner.json

The command copies these files into your project:

components/ui/liquid/sonner.tsx
components/ui/liquid/liquid.css

It also installs sonner.

Usage

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

// Once, near the root of your app.
<Toaster />

toast.success("Saved to your collection", {
  description: "A little moment, kept forever.",
})

Examples

Types

Everything Sonner can show: errors, promises, and actions.

API reference

Toaster

Sonner's Toaster with liquid defaults. Every Sonner prop is forwarded, and toast is Sonner's own.

Prop	Type	Default
`position` Where the pills form. iOS places them at the top.	`Position`	`"top-center"`
`visibleToasts` How many stay visible before older ones tuck behind.	`number`	`3`
`closeButton` A round close button inside each pill.	`boolean`	`true`

Motion

Parameter	Value
Formation	From 0.45 × 0.7 to full size over 520 ms, corners relaxing from a pill
Content	Fades and sharpens in 100 ms after the pill starts forming
Dismissal	Shrinks to 0.55 × 0.75 in 180 ms; swipes keep Sonner's gesture

Springs keep their velocity when interrupted, and every value here is removed under reduced motion. How the motion works

Accessibility

Sonner announces each toast in a polite live region, and Alt+T moves focus to the notifications.
Timers pause while the pointer is over a toast or pressing it, and while the page is hidden.
Every toast has a close button and can also be swiped away.
Under reduced motion toasts appear at full size with no formation.