bong-toast

Animated toast notifications with spring physics.
Hover any toast to expand its description.

Position

Size

Expand Description

Configuration

Duration4000ms

Border Radius14px

Stiffness400

Damping25

Mass0.8

Trigger a toast

Default layout

Tab layout

Usage

import { BongToast } from "@/components/bong-toast/bong-toast";
import { useBongToast } from "@/components/bong-toast/use-bong-toast";

// In your layout or root component:
<BongToast
  position="bottom-right"
  size="md"
  duration={4000}
  spring={{ stiffness: 400, damping: 25, mass: 0.8 }}
  style={{ borderRadius: 14 }}
/>

// In any component:
const { toast } = useBongToast();

// Simple
toast({ title: "Saved!", variant: "success" });

// With per-toast overrides
toast({
  title: "Custom toast",
  description: "Hover me to expand.",
  variant: "info",
  duration: 6000,
  size: "lg",
  style: { bg: "#1a1a2e", borderColor: "#4a9eff", borderRadius: 20 },
  spring: { stiffness: 300, damping: 15, mass: 1.2 },
});