Lucent UI
← MenuToastNavMenu →
✦ LLM-ready

Toast

molecule

Imperative toast notifications via ToastProvider + useToast hook. Five semantic variants with built-in icons, action buttons, cascading card stack with hover-to-expand, six screen positions, enter/exit animations, and configurable auto-dismiss.

"Add a ToastProvider from lucent-ui at the app root, then use the useToast hook to show a success toast on form submit."

Usage

React / JSX
import { ToastProvider, useToast } from 'lucent-ui'

<Toast position="bottom-right" duration={5000} />

Installation

pnpm add lucent-ui

API Reference

Toast props — * required

PropTypeDefaultDescription
position"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""bottom-right"Screen position for the toast stack.
durationnumber5000Default auto-dismiss duration in ms. Pass Infinity to disable.
portalContainerHTMLElement—Custom portal target. Defaults to document.body.
toast()(options: ToastOptions) => string—Show a toast. Returns a dismissible id. Options: title, description, variant, action ({ label, onClick }), duration.
dismiss()(id: string) => void—Programmatically dismiss a toast by id.