Component
Sonner Toast Component in Framer
Created by



About the resource
To use this customizable Sonner toast component, place it within the frame you want as a trigger, set it to absolute positioning so it doesn’t take up any space. Then, you can customize everything—from animation and visual style to title and description—using the component properties on the right panel. It’s that simple! Setting it up is quick and easy, making it a seamless addition to your project.
Note: make sure to set unique IDs for each Sonner Toast component if you use multiple on the same page.
About the resource
To use this customizable Sonner toast component, place it within the frame you want as a trigger, set it to absolute positioning so it doesn’t take up any space. Then, you can customize everything—from animation and visual style to title and description—using the component properties on the right panel. It’s that simple! Setting it up is quick and easy, making it a seamless addition to your project.
Note: make sure to set unique IDs for each Sonner Toast component if you use multiple on the same page.
About the resource
To use this customizable Sonner toast component, place it within the frame you want as a trigger, set it to absolute positioning so it doesn’t take up any space. Then, you can customize everything—from animation and visual style to title and description—using the component properties on the right panel. It’s that simple! Setting it up is quick and easy, making it a seamless addition to your project.
Note: make sure to set unique IDs for each Sonner Toast component if you use multiple on the same page.

The sonner toast component properties in Framer.

The sonner toast component properties in Framer.

The sonner toast component properties in Framer.