Notice

A toast notification system built on Base UI's Toast primitive.

notice

Installation

pnpm dlx stera-ui@latest add notice

Usage

Add <Notice /> once at the root of your app (e.g. in your layout), then trigger toasts with noticeManager.add(...) from anywhere in your code. noticeManager is a singleton, so it works in event handlers, server actions, or any module — no hook required.

import { Notice } from "@/components/ui/notice"

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Notice />
    </>
  )
}

import { noticeManager } from "@/components/ui/notice"

noticeManager.add({
  type: "success",
  title: "Event has been created",
  description: "Sunday, December 03, 2023 at 9:00 AM",
})

Inside a React component, you can also use useNoticeManager() to access the same API along with the live list of toasts.

If you need an isolated manager — for example, multiple <Notice /> viewports, scoped state in tests, or keeping a feature's toasts separate from the app-wide queue — create one with createNoticeManager() and pass it via the toastManager prop.

Notice Types

Pass a type to switch the leading icon and color treatment. Built-in types: success, info, warning, error, loading. Omit type for a plain notice with no icon.

Type	Description
(none)	Default notification
`success`	Success confirmation
`info`	Informational message
`warning`	Caution or advisory
`error`	Error or failure
`loading`	In-progress operation

API Reference

Built on Base UI's Toast primitive — see the full API reference there.

`<Notice />`

Drop-in viewport that renders the provider, portal, viewport, and a default toast layout. Use it once at the root of your app.

Prop	Type	Default
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`
`limit`	`number`	`3`
`timeout`	`number` (ms, `0` to disable auto-dismiss)	`5000`
`toastManager`	`ReturnType<typeof createNoticeManager>`	`noticeManager`

Pass a toastManager to swap the default singleton for a scoped manager created with createNoticeManager().

`createNoticeManager()`

Returns a fresh toast manager. Use it when you need an isolated queue — multiple viewports, tests, or feature-scoped notifications. The default export noticeManager is simply createNoticeManager() called once at module load.

import { createNoticeManager, Notice } from "@/components/ui/notice"

const billingNotices = createNoticeManager()

export function BillingArea() {
  return (
    <>
      <Notice toastManager={billingNotices} />
      {/* billingNotices.add(...) only renders here */}
    </>
  )
}

`noticeManager`

A singleton created with Toast.createToastManager() from Base UI. Use it to trigger toasts from anywhere.

Method	Description
`add(options)`	Create a toast. Returns the toast id. Reusing an existing id updates the toast in place.
`update(id, options)`	Update an existing toast.
`close(id?)`	Close a specific toast, or all toasts when called with no id.
`promise(promise, { loading, success, error })`	Render an async toast that transitions through `loading` → `success` / `error`.

add accepts: id, type, title, description, timeout, priority, actionProps, onClose, onRemove, and data. See the Base UI Toast docs for the full option list.

Lower-level parts

For custom layouts, compose the parts directly: NoticeProvider, NoticePortal, NoticeViewport, NoticeRoot, NoticeContent, NoticeTitle, NoticeDescription, NoticeAction, NoticeClose. Each is a thin wrapper around the matching Toast.* part from @base-ui/react/toast. useNoticeManager is re-exported from Base UI's Toast.useToastManager.