Falnix UI

Toast Notifications

Non-blocking feedback for asynchronous actions. Designed to manage stacking, duration, and placement automatically so you don't have to.

Async CapableKeyboard AccessibleAuto-Stacking

Trigger Toasts

Interactive Canvas

Correct Usage

  • Use for non-critical feedback (e.g. "Copied to clipboard").
  • Use Async Toasts for background tasks like file uploads.

Avoid Using When

  • Do not use for errors requiring action (e.g. "Payment Failed"). Use a Modal or Alert instead.
  • Never place toasts over navigation elements or primary buttons.

Implementation

For production, we recommend using Sonner, the best React toast library available. Falnix UI wraps Sonner with our custom branding.

1"use client"
2

3import { useTheme } from "next-themes"
4import { Toaster as Sonner } from "sonner"
5

6type ToasterProps = React.ComponentProps<typeof Sonner>
7

8const Toaster = ({ ...props }: ToasterProps) => {
9  const { theme = "system" } = useTheme()
10

11  return (
12    <Sonner
13      theme={theme as ToasterProps["theme"]}
14      className="toaster group"
15      toastOptions={{
16        classNames: {
17          toast:
18            "group toast group-[.toaster]:bg-neutral-900 group-[.toaster]:text-white group-[.toaster]:border-white/10 group-[.toaster]:shadow-lg",
19          description: "group-[.toast]:text-neutral-400",
20          actionButton:
21            "group-[.toast]:bg-neutral-50 group-[.toast]:text-neutral-900",
22          cancelButton:
23            "group-[.toast]:bg-neutral-100 group-[.toast]:text-neutral-500",
24        },
25      }}
26      {...props}
27    />
28  )
29}
30

31export { Toaster }