Notification

free

Notification gives toast and inline feedback messages a consistent content frame.

Invite sent

Taylor will receive an email with workspace access instructions.

import Notification from '@/components/ui/notification';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Notification

pnpm dlx nateui@latest add Notification

yarn dlx nateui@latest add Notification

Examples

Basic

Export ready

The report is available in your downloads folder.

import Notification from '@/components/ui/notification';

export default function BasicDemo() {
  return (

Status

Payment captured

The invoice is marked as paid.

Sync scheduled

New records will sync during the next run.

Review needed

Two imported rows need field mapping.

Upload failed

The CSV could not be processed.

import Notification from '@/components/ui/notification';

const messages = [
  {

Custom Icon

Automation complete

The enrichment workflow updated 24 customer records.

import { PiSparkle } from 'react-icons/pi'
import Avatar from '@/components/ui/avatar';
import Notification from '@/components/ui/notification';

Closable

Draft restored

The last autosaved version is back in the editor.

import { useState } from 'react';
import Button from '@/components/ui/button';
import Notification from '@/components/ui/notification';

Width

Compact

Use a fixed width for short toast stacks.

Full row

Use a fluid width when the message sits inside a page region.

import Notification from '@/components/ui/notification';

export default function WidthDemo() {
  return (

Duration Callback

Background import

The import is taking longer than expected.

Waiting for the timeout callback...

import { useState } from 'react';
import Notification from '@/components/ui/notification';

export default function DurationDemo() {

Toast

import Button from '@/components/ui/button';
import Notification from '@/components/ui/notification';
import toast from '@/components/ui/toast';

Toast Placement

import { useState } from 'react';
import Button from '@/components/ui/button';
import Notification from '@/components/ui/notification';
import Select from '@/components/ui/select';

Duration

import Button from '@/components/ui/button';
import Notification from '@/components/ui/notification';
import toast from '@/components/ui/toast';

Custom Close

import Button from '@/components/ui/button';
import Notification from '@/components/ui/notification';
import toast from '@/components/ui/toast';

API

Notification renders a message container. When used through toast.push, the toast wrapper injects removal behavior around the same component.

Prop	Description	Type	Default
`children`	Main notification message content.	`ReactNode`	-
`className`	Class names applied to the root notification.	`string`	-
`closable`	Shows the close control.	`boolean`	`false`
`customIcon`	Replaces the status icon area with custom content.	`ReactNode \| string`	-
`duration`	Delay in milliseconds before the timeout helper calls `onClose`. Pass `0` to disable it.	`number`	`3000`
`onClose`	Called by the close control and by the timeout helper when enabled.	`NotificationCloseHandler`	-
`ref`	Ref forwarded to the root notification element.	`Ref<HTMLDivElement>`	-
`title`	Optional heading rendered above the message.	`string`	-
`titleClass`	Class names applied to the title element.	`string`	-
`triggerByToast`	Toast integration flag normally supplied by the toast wrapper.	`boolean`	-
`type`	Status icon color and glyph.	`NotificationStatus`	-
`width`	Width applied to the root notification style.	`NotificationWidth`	`350`
`...nativeDivProps`	Native props applied to the root div.	`NativeNotificationProps`	-

Toast

toast is an imperative service that mounts a notification into its own layer outside your component tree, so you can trigger feedback from event handlers without rendering the message inline. Pass a cloneable <Notification> element as the message; the wrapper injects onClose and removal behavior into it. push returns a key for later removal — the first call for a given placement resolves asynchronously, so normalize the return with Promise.resolve(key) before calling remove.

Method	Description	Signature
`toast.push`	Mounts `message` and returns a removal key.	`(message: ReactNode, options?: ToastProps) => string \| undefined \| Promise<string \| undefined>`
`toast.remove`	Removes the toast matching a key from `push`.	`(key: string) => void`
`toast.removeAll`	Removes every mounted toast.	`() => void`

`ToastProps`	Description	Type	Default
`placement`	Corner or edge the toast stack anchors to.	`NotificationPlacement \| 'top-full' \| 'bottom-full'`	`'top-end'`
`transitionType`	Enter and exit animation style.	`'scale' \| 'fade'`	`'scale'`
`offsetX`	Horizontal distance from the placement edge.	`string \| number`	`30`
`offsetY`	Vertical distance from the placement edge.	`string \| number`	`30`
`block`	Stretches the toast to the full placement width.	`boolean`	`false`

Types

type NotificationStatus = 'success' | 'warning' | 'danger' | 'info';
type NotificationWidth = number | string;
type NotificationCloseHandler = (
  event?: MouseEvent<HTMLSpanElement>,
) => void;
type NativeNotificationProps = ComponentProps<'div'>;
type NotificationPlacement =
  | 'top-start'
  | 'top-center'
  | 'top-end'
  | 'bottom-start'
  | 'bottom-center'
  | 'bottom-end';