Watermark
A canvas-based watermark component that tiles text over content, with a composable two-part API
Installation
Usage
Basic Usage
Wrap any content with Watermark; a tiled text watermark is drawn over it. The canvas measures its container, redraws automatically on resize, and renders at device pixel ratio for crisp text.
Quarterly Report
A tiled text watermark is drawn over the content and follows the container size automatically.
"use client";import { Card, Watermark } from "@/ui";export default function Demo() { return ( <Watermark text="litefy" className="w-full max-w-sm rounded-xl"> <Card className="p-6"> <h3 className="text-lg font-semibold">Quarterly Report</h3> <p className="text-muted-foreground mt-2 text-sm"> A tiled text watermark is drawn over the content and follows the container size automatically. </p> </Card> </Watermark> );}Custom
Assemble Watermark.Root and Watermark.Canvas directly to control every canvas option (fontSize, color, fontFamily, rotate, gap, padding, opacity). The canvas redraws when props change.
Internal Document
Assemble Watermark.Root and Watermark.Canvas to control every canvas option. The canvas redraws when props or the container size change.
"use client";import { useState } from "react";import { Watermark } from "@/ui";export default function Demo() { const [rotate, setRotate] = useState(-20); return ( <div className="flex w-full max-w-sm flex-col gap-3"> <Watermark.Root className="rounded-xl border bg-background p-6"> <h3 className="text-lg font-semibold">Internal Document</h3> <p className="text-muted-foreground mt-2 text-sm"> Assemble Watermark.Root and Watermark.Canvas to control every canvas option. The canvas redraws when props or the container size change. </p> <Watermark.Canvas text="CONFIDENTIAL" fontSize={14} color="primary" rotate={rotate} gap={80} padding={16} opacity={0.15} /> </Watermark.Root> <label className="flex items-center gap-3 text-sm"> <span className="text-muted-foreground">Rotate</span> <input type="range" min={-45} max={0} value={rotate} onChange={(e) => setRotate(Number(e.target.value))} /> </label> </div> );}API Reference
High-level Components
Ready-to-use composite components.
Watermark
The composite watermark: a relatively positioned root with a tiled canvas overlay and your content.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | Watermark text content |
fontSize | number | 16 | Watermark text font size (px) |
color | WatermarkColor | "muted-foreground" | Watermark text color |
fontFamily | string | "sans-serif" | Watermark text font family |
rotate | number | -30 | Rotation angle in degrees |
gap | number | 100 | Minimum spacing (px) between adjacent watermark tiles |
padding | number | 20 | Extra padding (px) around each watermark tile |
opacity | number | 0.3 | Watermark opacity (0–1) |
children | React.ReactNode | - | The content covered by the watermark |
className | ClassNameValue | - | Custom class name, applied to the root |
style | React.CSSProperties | - | Inline style, applied to the root |
classNames | { canvas?: ClassNameValue } | - | Custom classes for the canvas |
styles | { canvas?: React.CSSProperties } | - | Inline styles for the canvas |
...props | React.ComponentProps<"div"> | - | Supports all native div props (except className, style), passed to the root |
WatermarkColor accepts the semantic tokens "muted" \| "muted-foreground" \| "primary" \| "primary-foreground" \| "secondary" \| "secondary-foreground" \| "accent" — resolved from CSS variables and reactive to light/dark mode — or any custom CSS color string.
Composable Components
WatermarkRoot
The watermark container, rendered as a div with a built-in relative class. The canvas measures and fills its parent, so the root provides the positioning context.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"div"> | - | Supports all native div props |
WatermarkCanvas
The canvas element that draws the tiled watermark text. It sizes itself to its parent element (which should be positioned, e.g. WatermarkRoot), redraws on container resize and on prefers-color-scheme changes, and renders at device pixel ratio.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | Watermark text content |
fontSize | number | 16 | Watermark text font size (px) |
color | WatermarkColor | "muted-foreground" | Watermark text color |
fontFamily | string | "sans-serif" | Watermark text font family |
rotate | number | -30 | Rotation angle in degrees |
gap | number | 100 | Minimum spacing (px) between adjacent watermark tiles |
padding | number | 20 | Extra padding (px) around each watermark tile |
opacity | number | 0.3 | Watermark opacity (0–1) |
className | ClassNameValue | - | Custom CSS class; built-in absolute inset-0 pointer-events-none select-none block size-full |
...props | React.ComponentProps<"canvas"> | - | Supports all native canvas props (except className, ref) |
Statics
Watermark.Root is an alias of WatermarkRoot, and Watermark.Canvas is an alias of WatermarkCanvas, for composable assembly.