Watermark

A repeating mark of text or an image drawn over its children, to discourage sharing and trace a leaked screenshot.

Preview in Figma LLMs

Overview

Design

Code

antuikit's Watermark is Ant Design's Watermark, installed into your project as a file you own. It adds a ref and children to the props, and nothing else. The ref row is the one marked antuikit in the API table below.

The mark is drawn to a <canvas> and shown as a background image, so neither the icon pack nor a Tailwind class reaches it. Pass font.color a resolved color, not a CSS variable.

Install

npx antuikit@latest init

npx antuikit@latest add watermark

The first command installs AntuikitProvider and the theme, and the second adds Watermark.

Import

From @/components/ui/watermark, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.

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

The axes

Watermark has no enumerated props. It is configured by the values you pass it (numbers, [x, y] pairs, strings) rather than by a variant name, so there is no size or variant to list here.

The loudness is the alpha in font.color, a continuous range rather than named levels.

The continuous props divide into four groups, and the Usage tab covers the decisions in each: what the mark says (content, image, font), how the tile is shaped (rotate, width, height), how the tiles are spaced (gap, offset), and where the overlay sits (zIndex).

Flags

One boolean, and it is the one that crosses a portal.

inherit (default true) passes the marks through React context, so a Modal or Drawer opened inside the Watermark shows them too, even though it renders outside the wrapped element.
inherit={false} keeps a popup clean: the Watermark marks its own element and nothing portalled out of it. On a nested Watermark it hands the descendants back to whichever Watermark is above, so the popup picks up the outer mark instead.

Slots

children is the only one, and it is the region being marked. Watermark wraps it in a div with position: relative and overflow: hidden, and draws the marks inside it.

Give the wrapped content a height. The marks cover the Watermark's own box, so content that has collapsed to zero height shows no marks.
The marks do not block clicks, text selection or focus, so a form under the mark is still typeable.
content and image are not slots. They are strings drawn to a canvas, so a React node cannot go in either one.

Events

onRemove

Styling

Watermark has no classNames object, and the element that draws the marks has no class, so a selector cannot reach it. The one surface you can style is the root, through className and style.