Toast

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/toast.json

Both need Tailwind CSS v4; see Installation for the setup.

Add to cartShow an error

// <Toaster /> once per app (here, once per example); toast() from anywhere.
export default function ToastExample() {
  return (
    <>
      <Cluster>
        <Button
          onClick={() =>
            toast({ title: 'Added to cart', description: 'Kuih Lapis × 2', variant: 'success' })
          }
        >
          Add to cart
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast({
              title: 'Could not update your cart',
              description: 'Please try again.',
              variant: 'destructive',
            })
          }
        >
          Show an error
        </Button>
      </Cluster>
      <Toaster />
    </>
  );
}

Render one <Toaster /> in your app (in Astro, as an island: <Toaster client:load />), then call toast({ title }) from anywhere. Toasts appear bottom-right, stack up to three at a time, pause while hovered or focused, and can be swiped or closed. The toaster is a live region, so each toast is announced.

Toasts disappear, so never put anything there the shopper must act on or read twice. Use an Alert for errors that block checkout.

The toaster only mounts in the browser, after the page loads: toasts can’t happen before then, and it keeps the server-rendered page identical to the first browser render.

API

const id = toast({ title: 'Saving…', persistent: true });
toast.dismiss(id);
toast.clear();

toast() option	Type
title	string	Required
description	string
variant	'default' | 'destructive' | 'success' | 'warning'	Default 'default'
duration	number (ms)	Defaults to the Toaster’s
persistent	boolean	Stay until closed
closeLabel	string	Default “Close”

<Toaster> prop	Type	Default
duration	number (ms)	5000
limit	number	3
label	string	'Notifications'