Notification

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/cli@latest add Notification

pnpm dlx @nateui/cli@latest add Notification

yarn dlx @nateui/cli@latest add Notification

Examples

Basic

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

export default function BasicDemo() {
  return (

Status

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

const messages = [
  {

Custom Icon

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

Closable

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

Width

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

export default function WidthDemo() {
  return (

Duration 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';