<OvioToaster variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs sonner, plus the Ovio theme, world, toy items.
npx shadcn add JanaSundar/ovio/toast↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { OvioToaster } from "@/components/ovio/toast/toast"
<OvioToaster
variant="minimal"
position="bottom-right"
/>Built with: Sonner · CSS (Toy: spring keys)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| variant | | "minimal" | "craft" | "retro" | "toy" | Which world to render. Defaults to the nearest OvioProvider, then minimal. |
| position | | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | Corner the toasts stack in. Default "bottom-right". |
| ovioToast.success / error / info | (title, { description?, action?, duration?, id? }) => id | Shows a toast in the toaster's world. Errors stay 8s, others 4s. Pressing the action also dismisses it; reusing an id replaces that toast. |
| ovioToast.dismiss | (id?) => void | Dismisses one toast, or all of them. |
| …ToasterProps | Sonner | Other Sonner Toaster props (duration, gap, offset, expand, hotkey) pass through. |