Skip to content
Appearance
Accent and overlay
Color mode

Toast

Toast notifications using Base UI primitives.

Upstream documentation

Examples

A short message appears after selection.

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Toast
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/toast.json'

Usage

A complete example using the installed component and hook paths.

Toast usage
"use client";type PreviewProps = { interactive?: boolean };import { useState } from "react";import { Button } from "@/components/ui/button";import { Toaster as BaseToaster, createToastManager } from "@/components/ui/toast";function ToastPreview({ interactive = false }: PreviewProps) {  const [manager] = useState(createToastManager);  return (    <div className="space-y-2">      <Button        variant="outline"        onClick={() =>          manager.add({            title: "Sample notification",            description: "Shown in this example.",          })        }      >        Show toast      </Button>      <p className="text-xs text-muted-foreground">A short message appears after selection.</p>      {interactive ? <BaseToaster toastManager={manager} /> : null}    </div>  );}export default function Demo() {  return <ToastPreview interactive />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Toaster

Toaster props
React.ComponentProps<typeof ToastProvider>
toastManager
toast

Toast

Toast props
ToastPrimitive.Root.Props & { sound?: boolean }
sound
true

ToastAction

ToastAction props
ToastPrimitive.Action.Props
render
<Button variant="outline" size="sm" />

ToastClose

ToastClose props
ToastPrimitive.Close.Props & { sound?: boolean }
render
<Button variant="ghost" size="icon-sm" />
sound
true

ToastContent

ToastContent props
ToastPrimitive.Content.Props

ToastDescription

ToastDescription props
ToastPrimitive.Description.Props

ToastPortal

ToastPortal props
ToastPrimitive.Portal.Props

ToastProvider

ToastProvider props
ToastPrimitive.Provider.Props & { sound?: boolean }
sound
true

ToastTitle

ToastTitle props
ToastPrimitive.Title.Props

ToastViewport

ToastViewport props
ToastPrimitive.Viewport.Props

createToastManager

Exported value.

toast

Exported value.

useToastManager

Exported value.

Source

Registry JSON