antuikit's message is Ant Design's message, installed into your project as a file you own. It ships a hook and no component: useMessage() returns the provider's message instance with your icon pack's status glyphs. Everything else behaves as in Ant Design.
Install
npx antuikit@latest init
npx antuikit@latest add message
The first command installs AntuikitProvider and the theme tokens. The second adds this hook.
Import
From @/components/ui/message, not from antd. The file is yours once it is installed, so the import path is a path in your project.
import { useMessage } from "@/components/ui/message"
useMessage, App.useApp and the static
There are three ways to reach a message API, and they are not interchangeable.
The staticmessage.success(...) imported from antd renders outside your React tree, so your theme, direction and locale never reach it.
App.useApp().message is the instance built by the <App> that AntuikitProvider renders, so it follows your theme.
useMessage() returns that same instance with your icon pack's glyphs. It returns the instance itself, not an [api, contextHolder] pair, so there is no holder to render. It throws outside AntuikitProvider.
1
import { useMessage } from "@/components/ui/message";
2
3
function SaveButton({ record }: { record: Record }) {
4
const message = useMessage();
5
6
const onSave = async () => {
7
// duration 0 keeps it open until the same key replaces it.
message.error({ content: "Could not save", key: record.id, duration: 0 });
15
}
16
};
17
18
return <Button onClick={onSave}>Save</Button>;
19
}
The axes
message has one axis, and it is a field on the call rather than a prop.
type takes info, success, error, warning and loading. It sets the glyph and the color, and nothing else.
The five typed methods are shorthands for open({ ...args, type }). Each takes a content node or a config object, and a function in the duration position is read as onClose.
An untyped open({ content }) shows no glyph and no status color.
top, maxCount, stack, rtl and transitionName are app-wide options, not per-call fields. AntuikitProvider does not set them, so they keep Ant Design's defaults.
Flags
pauseOnHover defaults to true and holds the countdown while the pointer is over the message.
duration: 0 keeps the message up until you call the close function the call returned or destroy(key).
There is no closable. A message never shows a close button and never adds anything to the tab order.
Slots
content is the text, one line. For a title and a second line or a Retry button, use Notification.
icon replaces the glyph for one call. icon: null does not remove the icon. A typed message falls back to its default glyph when icon is empty. Hide it with classNames: { icon: "hidden" }, or call open() without a type.
Events
onClick: called when the reader clicks the message.
onClose: called once the message has closed. The promise each call returns resolves at the same moment.
Styling
Pass classNames or styles on a call to style one part of that message, or set them once on ConfigProvider for every message. The keys are root, list, listContent, wrapper, icon and title.