Toast stack

Stack short results at the edge until you reach for them.

npx shadcn@latest add @silicon-ui/toast-stack
toastnotificationsonner
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/toast-stack

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/toast-stack/toast-stack.tsx
    • components/silicon-ui/toast-stack/toast-stack.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { ToastStack } from "@/components/silicon-ui/toast-stack/toast-stack";

API reference

ToastStack

PropTypeDefault
label

Accessible name of the notification region.

string"Notifications"
position"bottom-right" | "bottom-center" | "bottom-left""bottom-right"
contained

Pins the stack inside the nearest positioned ancestor instead of the window, for panels and previews.

booleanfalse
visibleToasts

How many toasts show at once. Older ones wait behind and return as the front ones close.

number3
hotkey

Alt+T moves focus into the stack.

booleantrue
classNamestring—

ToastStackProvider

PropTypeDefault
children*ReactNode—
duration

Base lifetime in milliseconds. Warnings and errors stay 1.6 times longer.

number5000
limit

Oldest toasts beyond this count are dropped from the queue.

number12

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens