build69
Sign inGet API key
build69  /  Components  /  Layout & Surfaces  /  Watermark

Watermark

v1.0.1NewUpdated 20 Jul 2026

Overlay watermark for confidential documents: wraps children in a relative container and tiles deterministic SVG text (or an image) on an absolutely-positioned pointer-events-none layer above the content. Theme-aware ink

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedwatermarkconfidentialoverlaystamp+4

The default, out-of-the-box Watermark.

Recommended for+14
  • ✓Confidential document previews
  • ✓Draft / paid / overdue stamps on invoices
  • ✓Per-viewer identity stamps on exported reports
Tags+6
watermarkconfidentialoverlaystampdraftcopytamper-guarddefault
Features+4
  • Single or multi-line text (string | string[])
  • Image tile alternative
  • Rotate / gap / offset / fontSize / fontWeight controls
  • Theme-aware default ink (low-alpha foreground token via CSS mask)
  • pointer-events-none + aria-hidden — content stays fully readable and interactive
  • MutationObserver tamper guard (on by default, documented as deterrent only)
  • SSR-safe deterministic SVG data-URI generation
Not recommended for−2
  • ✕Real security or DRM (the guard is a deterrent, not a boundary)
  • ✕Decorative page backgrounds (use HeroGradient or plain CSS)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Watermark" })

Usage

import { Watermark } from '@/components/surfaces/watermark';

<Watermark content={['ลับ — ห้ามเผยแพร่', 'somchai@ranodhardware.co.th']}>
  <InvoicePreview />
</Watermark>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
content

Watermark text; array renders one line per entry

string | string[]—
image

Image URL tiled instead of text (rotate/gap/color are text-only)

string—
rotate

Text rotation in degrees (default -22)

number—
gap

Horizontal / vertical space around each tile in px (default [96, 96])

[number, number]—
offset

Tiling grid offset in px

[number, number]—
color

Ink colour; defaults to a ~6% alpha mix of var(--color-foreground)

string—
zIndex

Watermark layer z-index (default 10)

number—
guard

Re-mount the layer if removed or tampered with (default true)

boolean—

Related

Platform docsAll componentsSource files