# antuikit / Empty

> Empty, with the kit's own line illustrations in place of antd's two presets.

Docs: https://antuikit.com/docs/components/empty

## Install

npx antuikit@latest init
npx antuikit@latest add empty

## Import

import { Empty } from "@/components/ui/empty";

## Demos

- [Basic](https://ui.antuikit.com/embed/empty/basic.md): An `Empty` with no props shows the default illustration and the text "No data".
- [Image presets](https://ui.antuikit.com/embed/empty/images.md): Set `image` to `Empty.PRESENTED_IMAGE_SIMPLE` for a smaller illustration that fits cards, table bodies and dropdowns.
- [Accent](https://ui.antuikit.com/embed/empty/accent.md): Set `accent` to `"primary"` to draw any illustration in the theme's primary shades instead of grays.
- [Filled](https://ui.antuikit.com/embed/empty/appearance.md): Set `appearance` to `"filled"` to fill the shapes with a light tint, which turns primary with `accent="primary"`.
- [Backdrop](https://ui.antuikit.com/embed/empty/backdrop.md): Set `backdrop` to `"floor"` (the default), `"grid"`, `"rings"` or `"none"` to choose the faint pattern behind the illustration.
- [Playground](https://ui.antuikit.com/embed/empty/playground.md): Switch `appearance`, `accent` and `backdrop` to see how they combine on a few illustrations.
- [Illustrations](https://ui.antuikit.com/embed/empty/illustrations.md): Every illustration the kit ships, each with the empty state it fits, like a bell for notifications.
- [Description](https://ui.antuikit.com/embed/empty/description.md): Pass `description` your own text, or `false` to show the illustration alone.
- [With actions](https://ui.antuikit.com/embed/empty/with-action.md): Put buttons in `children` to offer the next step, with the main action on the right, and pass `image` an illustration that fits the content.
- [With neutral actions](https://ui.antuikit.com/embed/empty/with-neutral-actions.md): Use default-colored buttons when the empty state sits in a quiet part of the page, outlined for the main action and text for the other.
- [Inside a popup](https://ui.antuikit.com/embed/empty/in-a-popup.md): Select, Table and other data components already show a compact `Empty` when they have nothing to list, so you rarely add one yourself.
- [Per-table empty state](https://ui.antuikit.com/embed/empty/table-locale.md): Set `locale.emptyText` on a single Table to give it its own empty state, which wins over `renderEmpty`.
- [No search results](https://ui.antuikit.com/embed/empty/filtered-out.md): A search that matches nothing shows an `Empty` with a button that clears the filter.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/empty`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Empty` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.