# antuikit / Watermark

> Watermark. Adds nothing beyond `className` merging through `cn()`.

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

## Install

npx antuikit@latest init
npx antuikit@latest add watermark

## Import

import { Watermark } from "@/components/ui/watermark";

## Demos

- [Basic](https://ui.antuikit.com/embed/watermark/basic.md): Wrap content in `Watermark` and set `content` to tile a line of text across it, while everything underneath stays usable.
- [Multiple lines](https://ui.antuikit.com/embed/watermark/multi-line.md): Pass `content` an array to stack several lines in each mark, like a classification above the viewer's email.
- [Image](https://ui.antuikit.com/embed/watermark/image.md): Pass `image` a URL to tile a logo instead of text, with `width` and `height` for its size and `content` as a fallback.
- [Font and color](https://ui.antuikit.com/embed/watermark/font-and-color.md): Set `font` to change the color, size and weight of the text, here tinted with the theme's primary color from `theme.useToken()`.
- [Gap](https://ui.antuikit.com/embed/watermark/gap-and-offset.md): Set `gap` to an `[x, y]` pair to move the marks closer together or further apart, here a dense pattern beside a sparse one.
- [Rotation](https://ui.antuikit.com/embed/watermark/rotation.md): Set `rotate` to change the angle of the marks from the default tilt, here `0` for level text that is easier to read.
- [In a modal or drawer](https://ui.antuikit.com/embed/watermark/inherit-portal.md): A Modal or Drawer opened inside a `Watermark` shows the marks too, because `inherit` is on by default.
- [Popups without marks](https://ui.antuikit.com/embed/watermark/inherit-off.md): Set `inherit` to `false` to keep the marks out of a Modal or Drawer opened inside the `Watermark`.
- [Classified file](https://ui.antuikit.com/embed/watermark/classified-file.md): A case file with redacted lines and a top secret stamp, marked as classified with its copy number so each printout can be traced.
- [Contract preview](https://ui.antuikit.com/embed/watermark/confidential-preview.md): A contract preview marked with a draft classification and the reviewer's email, so a leaked screenshot can be traced.
- [Draft review](https://ui.antuikit.com/embed/watermark/pricing-review.md): A draft pricing page marked as internal, where the text stays selectable and the comment field stays usable under the marks.

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