Notification is a hook, useNotification(), and the file is yours once it is installed. It renders nothing, so everything is set on the object you pass to each call. The kit adds status icons from your icon pack and a shape option, marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add notification
The first command sets up AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/notification, not from antd. The path points at the file in your project.
import { useNotification } from "@/components/ui/notification"
Getting the instance
There are three ways to open a notification, and only the last one follows the theme of the page it was called from.
import { notification } from "antd" renders outside your React tree, so it ignores the page's theme, locale and direction, and logs a warning.
notification.useNotification() from antd returns [api, contextHolder] and needs the holder rendered. Inside AntuikitProvider, which already has one, that is a second holder, which antd warns against.
useNotification() from the kit returns the methods themselves, bound to the <App> that AntuikitProvider renders. There is nothing to mount.
1
const notification = useNotification();
2
3
// Call it from an event handler or an effect, never during render.
4
notification.success({
5
title: "Deployed",
6
description: "web-frontend is live on production.",
7
shape: "squircle",
8
});
It returns open, success, info, warning, error and destroy, with no loading. Outside AntuikitProvider it throws an error that names the provider.
The axes
The fields that take one of a fixed set of values, passed with each call. They match the properties in the Design tab.
type takes success, info, warning or error, and sets the icon and its color. The four named methods set it for you. An untyped open() has no icon.
placement takes top, topLeft, topRight (the default), bottom, bottomLeft or bottomRight. It can differ per call, and each placement keeps its own pile.
role takes alert (the default) or status. alert interrupts a screen reader, status waits for a pause.
shape takes default or squircle, and is added by the kit. squircle gives the card superellipse corners.
squircle needs corner-shape, which Chromium supports from version 139. Other browsers show a plain rounded card, with the same corners as Tooltip and Popover.
Flags
Each of these turns one behavior on or off.
showProgress (off) draws the countdown bar. It does nothing on a card with duration: 0.
pauseOnHover (on) stops the countdown while the pointer is over the card. Keyboard focus does not pause it.
closable (on) shows the close button. Turn it off only on a card that closes itself.
Slots
The fields that take a node.
title says what happened.
description is the detail under it. Any node works, but the card is 384px wide.
icon replaces the status icon. On a typed call, icon: null does not remove it. Call open() without a type, or pass classNames: { icon: "hidden" }.
actions is the row of buttons under the content. It does not close the card: give the call a key and call destroy(key) from the handler.
closeIcon is the icon in the close button. AntuikitProvider sets it from your icon pack.
An icon you pass gets no status color. Give it a color class yourself, or through classNames.icon.
Events
onClose fires when the card closes, by timeout or by hand.
onClick fires on a click anywhere in the card.
Styling
classNames and styles take these keys. Use them before reaching for a selector.
1
<Notification
2
classNames={{
3
list: "…",
4
listContent: "…",
5
wrapper: "…",
6
root: "…",
7
title: "…",
8
description: "…",
9
actions: "…",
10
icon: "…",
11
section: "…",
12
close: "…",
13
progress: "…",
14
}}
15
/>
A Tailwind class on one of these keys wins without !important. To change a component token, set it in the theme, not as a CSS variable on the root.
API Reference
useNotification
useNotification's methods.
NotificationArgs
NotificationArgs's props. Rows marked antuikit in the Version column are added by the kit.