Empty is installed into your project as a file you own. It takes the same props as Ant Design v6's Empty and adds no behavior or styling: it forwards a ref, merges the class name through cn, and keeps both illustration presets. image is how you make it louder or quieter.
Install
npx antuikit@latest init
npx antuikit@latest add empty
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/empty, never from antd. The file lives in your project, so the import is a path, not a package.
import { Empty } from "@/components/ui/empty"
The axes
Empty has no variant, size or status prop. You configure it with the values you pass.
image does the job a size prop would: the two presets below cover most cases, and a node of your own is the third option. The simple preset also tightens the spacing.
Flags
Empty has no boolean props. The one switch is description={false}, which removes the text. An empty string still leaves a blank line. Use false inside a tight cell or a dropdown where the illustration is enough.
Slots
Three, and they are the whole component.
image takes a node or a string. A string is an image URL, rendered as an <img> whose alt is the description when that is a string. A node renders as is, so an Icon gives you an empty state that follows the icon pack. With neither, it uses ConfigProvider's empty.image, then the default.
description is the message. Leave it out and you get the locale's “No data”.
children renders under the description, in the footer part. Put the next step here.
The two illustrations
PRESENTED_IMAGE_DEFAULT and PRESENTED_IMAGE_SIMPLE are statics on the component, imported with it.
1
import { Empty } from "@/components/ui/empty"
2
3
// The full illustration, for an empty page section.
4
<Empty description="No invoices yet" />
5
6
// The smaller one, for cards, table bodies and dropdowns.
Both are illustrations, so switching the icon pack leaves them alone. They recolor with the theme in light and dark mode. A flat image you pass to image does not, so check it on both backgrounds.
You usually pass neither. Data components show an Empty when they have nothing to list and pick the size for you: Table and List use the simple one, and Select, TreeSelect, Cascader, Transfer and Mentions use an even smaller one to fit a popup.
Events
Empty has no event props. Everything it passes to its root element is in the API table below.
Styling
classNames and styles take the same four keys, one per part. Use them before a descendant selector: a part with a key keeps its name across versions.
1
<Empty
2
classNames={{
3
root: "…",
4
image: "…",
5
description: "…",
6
footer: "…",
7
}}
8
/>
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
Empty
Empty's props. Rows marked antuikit in the Version column are added by the kit.