Watermark

FreeNew

A faint tiled text mark over its content for confidential documents and drafts, drawn as an SVG overlay that cannot block clicks and restores itself if removed.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

rotate-22

fontSize16

color

tamperResistant

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/watermark

Usage

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

<Watermark content={["CONFIDENTIAL", user.email]}>
  <Report />
</Watermark>

Props

Prop	Type	Default	Description
`content`	`string \| string[]`	`-`	Lines drawn on each tile.
`rotate`	`number`	`-22`	Degrees.
`gap`	`[number, number]`	`[80, 80]`	Space between tiles.
`fontSize`	`number`	`16`	Pixels.
`color`	`string`	`rgba(128,128,128,0.28)`	Any CSS colour.
`tamperResistant`	`boolean`	`true`	Restore the overlay if removed.

Accessibility

Role: presentation.

The overlay is aria-hidden and has pointer-events none, so it never blocks content or assistive technology.
The tile is an SVG data URL generated without a canvas, so it renders on the server.
With tamperResistant a MutationObserver restores the overlay if it is removed or hidden. This deters casual removal only; it is not DRM.

Keyboard

Not interactive: the overlay ignores the pointer and the keyboard.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/watermark

Usage

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

<Watermark content={["CONFIDENTIAL", user.email]}>
  <Report />
</Watermark>

Props

Prop	Type	Default	Description
`content`	`string \| string[]`	`-`	Lines drawn on each tile.
`rotate`	`number`	`-22`	Degrees.
`gap`	`[number, number]`	`[80, 80]`	Space between tiles.
`fontSize`	`number`	`16`	Pixels.
`color`	`string`	`rgba(128,128,128,0.28)`	Any CSS colour.
`tamperResistant`	`boolean`	`true`	Restore the overlay if removed.

Accessibility

Role: presentation.

The overlay is aria-hidden and has pointer-events none, so it never blocks content or assistive technology.
The tile is an SVG data URL generated without a canvas, so it renders on the server.
With tamperResistant a MutationObserver restores the overlay if it is removed or hidden. This deters casual removal only; it is not DRM.

Keyboard

Not interactive: the overlay ignores the pointer and the keyboard.