Toast

A toast notification whose status lands with a rippling pulse and whose text morphs word by word.

Dependencies

motionlucide-react

Interaction Type

Toasts stack in a corner and fan out when you hover them. When a toast lands on success, error, warning or info, its badge pops and a ripple washes across the card and its text. Updating a toast in place morphs its words into the new message. Hover it to show the close button. Honors prefers-reduced-motion.

Installation

npx shadcn@latest add ikislay/pixel-ui/toast

How to use

"use client"


import { Toaster, toast } from "@/components/ui/toast"


const save = () => fetch("/api/save", { method: "POST" })


// mount Toaster once, in your root layout
export function Demo() {
  return (
    <>
      <button
        onClick={() =>
          toast.promise(save(), {
            loading: "Saving",
            success: "Saved",

Source Code

// Loading…

Props

Options you can pass to customize this component.

Prop
Type
Description
toast(title, options)
(title: ReactNode, options?: ToastOptions) => string | number

Shows a plain toast and returns its id. toast.success, toast.error, toast.warning, toast.info and toast.loading take the same arguments and add a status badge.

toast.promise
(task: Promise<T> | (() => Promise<T>), messages, options?) => Promise<T>

Shows messages.loading until the task settles, then swaps to messages.success or messages.error in the same toast. Either can be a function of the result.

description
ReactNode

Muted text under the title. A line break in a string starts a new line.

icon
ReactNode

Fills the round tile the status badge sits on. Defaults to a bell.

action
{ label: string; onClick: () => void }

A button on the right. Clicking it runs onClick and closes the toast.

duration
number

Milliseconds before the toast closes. Loading toasts stay until updated or dismissed.

id
stringnumber

Reuse an id to update a toast that is already showing instead of adding a new one. String text morphs into the new message.

dismissible
boolean

Shows the close button on hover.

position
"top-left""top-center""top-right""bottom-left""bottom-center""bottom-right"

On Toaster, where the stack sits. Up to 3 toasts show at once. Dark mode follows your .dark class.

gap
number

On Toaster, the space in pixels between expanded toasts.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Credits

  • •Ripple inspired by morphin.dev

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Pixel UI component must credit Pixel UI with a visible link back to pixelui.dev, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Pixel UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
Toast