Toast

Notifications that unfold out of a capsule at the top edge. Swipe one up to dismiss it.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/toast

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Toast, useToast } from "@/components/liquikit/toast"

// Once, near the root of your app
<Toast.Provider>
  <App />
  <Toast.Viewport />
</Toast.Provider>

// Anywhere inside it
const toast = useToast()
toast.add({ title: "Copied", description: "The link is on your clipboard." })

Toast.Viewport takes a container, so toasts can live inside a card instead of at the top of the window.

API Reference#

Toast.Viewport

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark toasts.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`container`	`BaseToast.Portal.Props["container"]` Where the popup renders. Defaults to the end of the body.	—

Tabs Toggle