Alert is installed into your project as a file you own. It takes the same props as Ant Design v6's Alert, plus a neutral type="default" and a three-level emphasis, both marked antuikit in the API table. Every other prop works the way you know it.
Install
npx antuikit@latest init
npx antuikit@latest add alert
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/alert, never from antd. The file lives in your project, so the import is a path, not a package.
import { Alert } from "@/components/ui/alert"
The axes
Three props that take a value from a set: type says which status, emphasis says how loudly, and variant says whether there is a border. The Design tab's Figma properties follow the same axes.
type takes success, info, warning, error and a neutral default. It picks the fill and the default icon. default is for content with no status. Left off, you get info, or warning under banner.
emphasis takes subtle, default and strong. subtle swaps the status tint for a neutral fill, default keeps the tint, and strong fills the alert with its status color and recolors the title, description, icon and close button to read on it. subtle and strong never show a border, whatever variant says. Changing emphasis never changes the alert's size.
variant takes outlined and filled. It only changes the border: both keep the same light tint. For a solid fill, use emphasis="strong".
With type="default" at strong, the alert inverts between modes (near-black on white in light, the reverse in dark), because its fill and text colors already invert with the theme.
Flags
Two booleans, and the second one changes the first one's default.
showIcon turns the whole icon slot on, not just the default icon: an icon passed without it renders nothing. Off by default.
banner is the page-wide form: no border, square corners and no bottom margin, so the alert sits flush against its container. It also changes two defaults, type to warning and showIcon to on, where you have not set them yourself.
closable is a flag in its boolean form and a config object otherwise. The object is where closable.onClose (fires on the click) and closable.afterClose (fires once the closing animation ends) live. Remove the alert from your state in afterClose, or the animation is cut short.
Slots
The props that take a node. A slot is where your own markup goes, and it is the route to reach for before a descendant selector.
title is the message itself. On its own it gives the compact alert, with the icon, action and close button centered against the block.
description is the second line, and passing it switches to the taller layout: the parts top-align and the icon grows. When a title wraps in the compact layout, pass classNames to line the icon, action and close button up with its first line.
icon replaces the status icon, and needs showIcon. On a strong alert it takes the alert's text color, like the default icon.
action is the trailing slot, and the one part strong leaves alone. Buttons there keep their own colors, so give each one a color that reads on the fill, and set color beside variant: a variant="text" with no color renders as an outlined button.
Alert.ErrorBoundary catches a render error in its subtree and renders the message and the component stack as an error Alert. The kit's Alert does not include it, so write import { Alert as AntdAlert } from "antd". A boundary keeps its error until it remounts, so give it a new key to reset it.
Events
closable.onClose fires on the close button's click.
closable.afterClose fires once the leave animation has finished.
Styling
classNames and styles take the same seven keys, one per part. Use them before a descendant selector: a part with a key keeps its name across versions.
1
<Alert
2
classNames={{
3
root: "…",
4
icon: "…",
5
section: "…",
6
title: "…",
7
description: "…",
8
actions: "…",
9
close: "…",
10
}}
11
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.
API Reference
Alert
Alert's props. Rows marked antuikit in the Version column are added by the kit.