# antuikit / notification

> The notification API, with status icons from your icon pack and a `shape`.

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

## Install

npx antuikit@latest init
npx antuikit@latest add notification

## Import

import { useNotification } from "@/components/ui/notification";

## Demos

- [Types](https://ui.antuikit.com/embed/notification/types.md): Call `success`, `info`, `warning` or `error` to open a card with the matching status icon and color.
- [Custom icon](https://ui.antuikit.com/embed/notification/override.md): Pass `icon` a node to replace the status icon, like a trash can for a deleted project.
- [Without an icon](https://ui.antuikit.com/embed/notification/no-icon.md): Call `open()` without a type for a plain card with a title and a description and no icon.
- [Shape](https://ui.antuikit.com/embed/notification/shape.md): Set `shape: "squircle"` for a card with smooth superellipse corners, the same as Tooltip and Popover.
- [Duration](https://ui.antuikit.com/embed/notification/duration.md): Set `duration` in seconds to change how long the card stays, or `0` to keep it open until someone closes it.
- [On close](https://ui.antuikit.com/embed/notification/on-close.md): Pass `onClose` to run code when the card closes, by timeout or by hand, like enabling a button again.
- [Placement](https://ui.antuikit.com/embed/notification/placement.md): Set `placement` on a call to open the card in any of the four corners, or centered at the top or bottom.
- [Stack](https://ui.antuikit.com/embed/notification/stack.md): When more than three cards are open they collapse into a stack that expands on hover, and `destroy()` closes them all.
- [Update by key](https://ui.antuikit.com/embed/notification/async-status.md): Call again with the same `key` to update a card in place, like switching it from info to success when a deploy finishes.
- [Live progress](https://ui.antuikit.com/embed/notification/progress.md): Pass a `Progress` bar as the `description` and update it by `key` to show an upload moving forward.
- [Countdown bar](https://ui.antuikit.com/embed/notification/show-progress.md): Set `showProgress` to draw a bar that counts down the `duration` and pauses while the pointer is over the card.
- [Rich content](https://ui.antuikit.com/embed/notification/rich-content.md): Pass any node as the `description`, like an avatar with a name, or an `Alert` inside the card.
- [Actions](https://ui.antuikit.com/embed/notification/actions.md): Pass buttons in `actions` and set `duration: 0` so the card stays until the reader picks one.
- [Push message](https://ui.antuikit.com/embed/notification/push.md): A message card like a push notification, with the sender's avatar and unread count as the icon, the time in place of close, and a Reply that opens a text box.
- [Question from an app](https://ui.antuikit.com/embed/notification/ask.md): A card with an app icon that asks a question, opens its answers as a list on Answer, and updates by `key` once one is picked.
- [Suggested task](https://ui.antuikit.com/embed/notification/worktree.md): A card that suggests a task, shows the full brief in a `Popover` on hover, and starts it from a split button with more options.
- [Deploy finished](https://ui.antuikit.com/embed/notification/deploy-finished.md): A success card for a finished deploy, with View log and Dismiss buttons that close it by its `key`.

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