# antuikit / XNotification

> `xNotification` as a hook. Returns `[{ permission }, { open, close, requestPermission }]`, and re-renders when `requestPermission()` settles. Adds nothing.

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

## Install

npx antuikit@latest init
npx antuikit@latest add x-notification

## Import

import { useXNotification } from "@/components/ui/x-notification";

## Demos

- [Basic](https://ui.antuikit.com/embed/x-notification/basic.md): Call `requestPermission` from a click, then `open` with a `title` and `body` to show a system notification once the user allows it.
- [Duration](https://ui.antuikit.com/embed/x-notification/duration.md): Set `duration` in seconds to close the notification on its own, like a short heads-up that a reply is ready.
- [Close by tag](https://ui.antuikit.com/embed/x-notification/close.md): Give a notification a `tag`, then call `close` with that tag to remove it, and to stop a second `open` with that tag from showing a duplicate.
- [Click handler](https://ui.antuikit.com/embed/x-notification/click.md): Pass `onClick` to bring the tab back into focus when the user clicks the notification, and close it with the function it receives.
- [Report ready](https://ui.antuikit.com/embed/x-notification/report-ready.md): A report card where an agent runs a long task with a progress bar and sends a system notification when the report is ready.
- [Reply while away](https://ui.antuikit.com/embed/x-notification/away-reply.md): A chat panel with a switch that sends a system notification for a reply only when the user has moved to another tab.
- [Reminder](https://ui.antuikit.com/embed/x-notification/reminder.md): A reminder form where the user writes a note, picks a delay and gets a system notification when the time comes.

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