# antuikit / message

> The message API, with the kit's icon for each message type.

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

## Install

npx antuikit@latest init
npx antuikit@latest add message

## Import

import { useMessage } from "@/components/ui/message";

## Demos

- [Types](https://ui.antuikit.com/embed/message/types.md): Call `info`, `success`, `warning`, `error` or `loading` to show a message with that type's icon and color.
- [Replace by key](https://ui.antuikit.com/embed/message/replace-by-key.md): Give a `loading` message a `key` and `duration: 0`, then call `success` with the same key to swap it in place, or `destroy(key)` to close it.
- [Duration](https://ui.antuikit.com/embed/message/duration.md): Set `duration` in seconds to keep a message up for more or less than the default 3, or `0` to keep it until you close it.
- [Custom icon](https://ui.antuikit.com/embed/message/override.md): Pass `icon` to replace the type's glyph with your own node, like a filled star for a favorite.
- [Without an icon](https://ui.antuikit.com/embed/message/hide-icon.md): Set `classNames: { icon: "hidden" }` to show a typed message with no glyph, since `icon: null` falls back to the default.
- [With an action](https://ui.antuikit.com/embed/message/action.md): Put a `Button` in `content` and close the message by its `key`, like an Undo link after a file is deleted.
- [Rich content](https://ui.antuikit.com/embed/message/rich-content.md): Pass any node as `content`, like an avatar beside a name and a second line of text.
- [Live progress](https://ui.antuikit.com/embed/message/progress.md): Call `open` again with the same `key` to update the content in place, here a `Progress` bar that fills while a file uploads.
- [Save flow](https://ui.antuikit.com/embed/message/save-flow.md): A Save button that shows a loading message while the request runs, swaps it for "Saved", then shows "Backup queued" once that closes.

## 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/message`, 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-*)`.
- `message` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.