Toast

Brief confirmation for a completed background action.

statusmessage

Preview

Live · keyboard ready

Copied to clipboardThe install command is on your clipboard.

When to use

A single success confirmation, like Changes saved, controlled with local state.
Demos or small apps that do not need a toast queue.

When not to use

Use toast-stack for app-wide notifications with types, actions, updates, and stacking.
Use alert for persistent messages that should stay in the page flow.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "type": "registry:ui",
  "title": "Toast",
  "description": "Brief confirmation for a completed background action.",
  "categories": [
    "feedback"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/toast/toast.tsx",
      "type": "registry:component",
      "target": "@components/manicat/toast/toast.tsx"
    },
    {
      "path": "registry/components/toast/toast.module.css",
      "type": "registry:component",
      "target": "@components/manicat/toast/toast.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/toast",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/toast",
    "markdown": "https://uiarc.dev/components/toast/markdown",
    "tags": [
      "status",
      "message"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { useState } from "react";
import Toast from "@/components/manicat/toast/toast";
import { ToastStack, ToastStackProvider, useToastStack } from "@/components/manicat/toast-stack/toast-stack";
import { Button } from "@/components/manicat/button/button";

export function ToastExample() {
  const [open, setOpen] = useState(true);

  return (
    <ToastStackProvider>
      <div className="grid justify-items-center gap-3">
        <Button variant="secondary" onClick={() => setOpen((value) => !value)}>
          {open ? "Hide toast" : "Show toast"}
        </Button>
        <Toast title="Copied to clipboard" description="The install command is on your clipboard." open={open} onOpenChange={setOpen} />
      </div>
    </ToastStackProvider>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Copy confirmation A single toast confirming an action the user just took.

Live · keyboard ready

Link copiedAnyone with the link can view this project.

copy-confirmation-a-single-toast-confirming-an-action-the-user-just-took-.tsxtsx

"use client";

import { useState } from "react";
import { Button } from "@/components/manicat/button/button";
import Toast from "@/components/manicat/toast/toast";
import { ToastStack, ToastStackProvider, useToastStack } from "@/components/manicat/toast-stack/toast-stack";

export function ToastCopiedExample() {
  const [open, setOpen] = useState(true);

  return (
    <ToastStackProvider>
      <div className="grid justify-items-center gap-3">
        <Button variant="secondary" onClick={() => setOpen((value) => !value)}>
          {open ? "Hide toast" : "Copy link"}
        </Button>
        <Toast title="Link copied" description="Anyone with the link can view this project." open={open} onOpenChange={setOpen} />
      </div>
    </ToastStackProvider>
  );
}

Keyboard interactions

Keys	Action
Tab then Enter	Reaches and activates the dismiss button.

Accessibility

Renders role="status" with aria-live="polite" and aria-atomic, so new content is announced without stealing focus.
The dismiss button is labelled "Dismiss notification"; the check icon is aria-hidden.
Positioning is up to the caller; the auto-dismiss timer does not pause on hover, so keep messages short.

Motion

Enters rising 16px from 0.96 scale on a morph spring while the check draws in; a swipe past 80px or 480px/s throws it off with its release velocity.
Closing sinks it 8px and fades. Copy changes rise in while the height springs to fit.
Reduced motion uses opacity fades and disables dragging.

Responsive behavior

The toast is min(100%, 26rem) wide and the title ellipsizes on one line.
Positioning is up to you; fix it to the bottom center on phones so it clears the thumb zone edges.
It swipes horizontally on touch and mouse; drag is disabled under reduced motion.

Performance

Drag and throw run on motion values, and a ResizeObserver springs the height when copy changes.
The auto-dismiss timer does not pause on hover, so keep messages short.

Notes for AI

Use for a single success confirmation you control with local state. Use toast-stack for an app-wide queue with types, actions, updates, and stacking.
Import as a default export. Position it yourself, for example fixed to the bottom of the viewport.