Components/Components
Pebble Toast
A stack style notification toast with micro-animations and dynamic gradients.
toastnotificationmicro-interactionmotion
Preview
Installation
npx shadcn@latest add @grootstudio/pebble-toastUsage
1
Add the Toaster component.
TSapp/layout.tsx
2
Import the component
3
Use the component
Toast Positions
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| success | (message: string | React.ReactNode, options?: ToastOptions) => void | - | Function to trigger a success toast variant with a green gradient. | |
| warning | (message: string | React.ReactNode, options?: ToastOptions) => void | - | Function to trigger a warning toast variant with a yellow gradient. | |
| error | (message: string | React.ReactNode, options?: ToastOptions) => void | - | Function to trigger an error toast variant with a red gradient. | |
| info | (message: string | React.ReactNode, options?: ToastOptions) => void | - | Function to trigger an info toast variant with a blue gradient. | |
| promise | (promise: Promise<any>, options: PromiseOptions) => void | - | Function to trigger a promise-based toast that updates dynamically on resolution/rejection. | |
| duration | number | 6000 | Default duration of the toast in milliseconds. | |
| position | top-left|top-center|top-right|bottom-left|bottom-center|bottom-right | bottom-right | Default position of the toast stack. |
Dependencies
sonner
motion
lucide-react