shadcn.io is not affiliated with official shadcn/ui

Shadcn Toast for React

Provides feedback on an action.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/toast.json

npx shadcn@latest add https://kit.dev/r/base/toast.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/toast.json

yarn shadcn@latest add https://kit.dev/r/base/toast.json

This component depends on Button and Spinner. Install them first if you haven't already.

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Add the following to your `globals.css`.

globals.css

:root {
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}

Copy and paste the following code into your project.

components/ui/toast.tsx

"use client";

import { Toast as ToastPrimitive } from "@base-ui/react/toast";
import {
  CircleCheckIcon,
  InfoIcon,
  OctagonXIcon,
  TriangleAlertIcon,
  XIcon,
} from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/base/components/button";
import { Spinner } from "@/registry/base/components/spinner";

const { createToastManager: createToaster, useToastManager } = ToastPrimitive;

export { createToaster, useToastManager };

Update the import paths to match your project setup.

Anatomy

ToastItem
├── ToastGroup
├── ToastTitle
├── ToastDescription
├── ToastActionTrigger
└── ToastCloseTrigger

Usage

import { Button } from "@/components/ui/button";
import { createToaster, Toaster } from "@/components/ui/toast";

const toast = createToaster({
  overlap: true,
  placement: "bottom-end",
});

const ToastDemo = () => {
  const handleShowToast = () => {
    const id = toast.create({
      action: {
        label: "Undo",
        onClick() {
          toast.dismiss(id);
        },
      },
      description: "Sunday, December 3 at 9:00 AM",
      title: "Event created",
    });
  };

  return (
    <>
      <Toaster toaster={toast} />
      <Button onClick={handleShowToast} variant="outline">
        Show Toast
      </Button>
    </>
  );
};

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Types

Set the type option to render a status icon.

PreviewCode

Promise

Use toast.promise for loading, success, and error states.

PreviewCode

API Reference

Toast

div

PropType

toastToastRootToastObject<any>

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast"

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

CSS variableType

--gapstring

--heightstring

--offset-ystring

--peekstring

--scalestring

--shrinkstring

--toast-heightstring

--toast-indexstring

--toast-offset-ystring

--toast-swipe-movement-xstring

--toast-swipe-movement-ystring

ToastItem

div

PropType

toastToastRootToastObject<any>

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

ToastTitle

h2

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-title"

data-scope"toast"

data-part"title"

ToastDescription

p

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-description"

data-scope"toast"

data-part"description"

toast

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

ToastPortal

div

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"toast-portal"

data-scope"toast"

data-part"portal"

ToastViewport

div

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-viewport"

data-scope"toast"

data-part"viewport"

ToastContent

div

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-content"

data-scope"toast"

data-part"content"

ToastAction

button

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-action-trigger"

data-scope"toast"

data-part"action"

ToastClose

button

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-close-trigger"

data-scope"toast"

data-part"close"

ToastActionTrigger

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

ToastCloseTrigger

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

ToastIcon

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"toast-icon"

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

Toaster

PropType

toaster?ToastPrimitive.Provider.Props["toastManager"]

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"toast"

data-part"root"

aria-atomic"true"

aria-describedbystring

aria-labelledbystring

data-alignstring

data-first?string

data-mounted?string

data-overlap?string

data-paused?string

data-placementstring

data-sibling?string

data-sidestring

data-stack?string

data-state"open" | "closed"

data-typestring

role"status"

ToastProvider

PropType

children?React.ReactNode

limit?number

timeout?number

toastManager?object

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"toast"

data-part"provider"

Installation

This component depends on Button and Spinner. Install them first if you haven't already.

Install the following dependencies:

Add the following to your globals.css.

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Usage

Accessibility

Demos

Types

Promise

API Reference

Toast

ToastItem

ToastTitle

ToastDescription

toast

ToastPortal

ToastViewport

ToastContent

ToastAction

ToastClose

ToastActionTrigger

ToastCloseTrigger

ToastIcon

Toaster

ToastProvider

useToast

Add the following to your `globals.css`.