Toast
Motion-first toast notification system with drag-to-dismiss, auto-dismiss countdown, and spring physics. Use ToastProvider and useToast hook.
Feedback
Installation
Copy and paste
Copy the component source code and paste it into your project.
import { ToastProvider, useToast } from "driftkit";Props
| Name | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main toast message text displayed prominently. |
description | string | No | Optional secondary text displayed below the title in smaller font. |
variant | "default" | "success" | "error" | "warning" | No | Visual variant affecting border color and icon. Success shows ✓, error shows ✕, warning shows !. |
duration | number | No | Auto-dismiss duration in milliseconds. Progress bar shows countdown. |
🎮
Playground
Tune spring physics for this component
Live Preview
✓
Success!
Your changes have been saved.
Spring Physics
300
30
1
Generated Code
const springConfig = {
"type": "spring",
"stiffness": 300,
"damping": 30,
"mass": 1
};
// Basic hover animation
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={springConfig}
>
<Toast />
</motion.div>
// Advanced with custom animations
<motion.div
animate={{
scale: [1, 1.02, 1],
y: [0, -4, 0]
}}
transition={{
...springConfig,
repeat: Infinity,
repeatDelay: 2
}}
>
<Toast />
</motion.div>Stiffness: Controls animation speed. Higher values create snappier animations.
Damping: Controls resistance to motion. Lower values create more bounce and overshoot.
Mass: Controls the perceived weight. Higher values make animations slower with more momentum.
Source Code
View the source code on GitHub to see the full implementation.
View on GitHub