Toast
NewInstallation
npx shadcn@latest add https://uibrik.com/r/toast.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/toast/toast.tsx"use client"; // Call `toast("Saved")` from anywhere; one <Toaster /> on the page shows them. // New toasts slide in at the front and push older ones back into a short // stack; hovering (or tabbing into) the stack fans it out and pauses the // timers. Swipe one sideways to dismiss it. `toast.promise` keeps one toast // through loading, then swaps its icon and text in place when it settles. import { animate, AnimatePresence, motion, useMotionValue, useReducedMotion, useTransform, type PanInfo, } from "motion/react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore,
Adds the files to
components/uibrik/toast and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/toast.Props
Toaster- position
- Type "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
- "bottom-right"
- Corner or edge the toasts gather in.
- expand
- Type boolean
- false
- Keep the stack fanned out instead of only on hover.
- visibleToasts
- Type number
- 3
- Toasts drawn at once.
- duration
- Type number
- 4000
- Default time on screen. Hovering pauses it.
- gap
- Type number
- 12
- Space between toasts when fanned out.
- closeButton
- Type boolean
- false
- Show a close button on each toast.
- toast(title, options?)
- Type function
- –
- Shows a toast and returns its id. Also toast.success, .error, .info, .loading, .promise(promise, { loading, success, error }) and .dismiss(id?).
- options.description
- Type ReactNode
- –
- A second line under the title.
- options.action
- Type { label: string; onClick: () => void }
- –
- One button, e.g. Undo. Pressing it also dismisses the toast.
- options.duration
- Type number
- –
- Milliseconds on screen for this toast. Infinity keeps it until dismissed.
- options.id
- Type number | string
- –
- Reuse an id to update that toast in place.
- className
- Type string
- –
- Classes for the Toaster's region.
