Toast and Sonner animation
Animate shadcn/ui Sonner toasts: each toast flies out of the button you pressed, so people see which action it belongs to. Base UI toasts work too.
What it fixes
A stock toast slides in from the corner, far from the button that caused it. With cut on action, it starts at the button, small and slightly blurred, and flies to its place. You see which action the toast is about without reading it.
If nothing was pressed in the last second, as with a toast from a websocket message, the library's own entrance plays.
It works with sonner on both bases, and with Base UI's own Toast.
Install
npx shadcn add sonnerChoose a cut
<Cuts toast="none" />Prop
Type
The flight takes 480 ms × pace, from 0.4 scale and a 6px blur. The toast's exit is the library's own.
Questions
Do I need to change my toast() calls?
No. Call toast() as usual. Each toast flies out of the element you pressed, with Sonner and with Base UI toasts.
Tabs
Animate shadcn/ui Tabs: the indicator slides to the new tab, the panel follows a beat later and the height eases to fit. Works on Base UI and Radix.
Command
Animate the shadcn/ui Command menu: it opens with the dialog's cut, growing into place instead of popping in, with no changes to your component.