@uiness/toast

Toasts and notifications for React. Stacked with the newest in front, expand on hover, swipe to dismiss, promise tracking, actions, six positions. Zero dependencies.

Documentation · Registry · GitHub

pnpm add @uiness/toast

Usage

import { Toaster, toast } from '@uiness/toast'

function App() {
  return (
    <>
      <Toaster />
      <Page />
    </>
  )
}

toast('Event created')
toast.success('Saved', { description: 'All changes are in.' })
toast.error('Could not save')
toast('Deleted', { action: { label: 'Undo', onClick: restore } })
toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Could not save' })

toast() options

| Option | Description | | --- | --- | | id | Reuse to update a toast in place. | | title, description | Content. | | type | default, success, error, info, warning, loading. | | icon | Replace the type icon, null hides it. | | duration | Auto dismiss in ms, Infinity to keep. Loading toasts default to Infinity. | | action, cancel | { label, onClick } buttons. Actions close the toast unless event.preventDefault() is called. | | dismissible | Swipe and close button. Default true. | | closeButton, position, important | Per toast overrides. | | render | Replace the card with your own markup, see toast.custom. | | onDismiss, onAutoClose | Callbacks. |

toast.dismiss(id) closes one, toast.dismiss() closes all.

<Toaster /> props

| Prop | Default | Description | | --- | --- | --- | | position | 'bottom-right' | Any corner or center of the top and bottom edges. | | expand | false | Keep the stack expanded instead of collapsing until hovered. | | visibleToasts | 3 | Toasts visible in the collapsed stack. | | richColors | false | Colored backgrounds per type. | | closeButton | false | Close button on every toast. | | duration | 4000 | Default auto dismiss delay. | | gap, offset | 14, 24 | Spacing in px. | | icons | | Custom icons per type. | | toastClassName, toastStyle | | Applied to every card. | | store | shared | A store from createToastStore() for isolated toasters. |

Theming

--toast-bg, --toast-color, --toast-border, --toast-shadow, --toast-radius, --toast-font,
--toast-width, --toast-action-bg, --toast-action-color,
--toast-success-bg / -color / -border, same for error, info and warning (with richColors)

Data attributes for CSS: data-uiness-toaster, data-position, data-expanded on the region; data-toast, data-type, data-index, data-front, data-removing on each card.

Accessibility

The region is labelled "Notifications". Each toast is a polite live region, or assertive with important. Timers pause while hovering and while the page is hidden.

License

MIT

With the uiness registry

Prefer components that already follow your theme? uiness is also a registry for the shadcn CLI. Register it once in components.json:

{
  "registries": {
    "@uiness": "https://uiness.vercel.app/r/{name}.json"
  }
}

Then add the item:

npx shadcn@latest add @uiness/toast

The toast item installs this package and a <Toaster /> in components/ui wired to your theme tokens.