Watermark
A canvas-based watermark component that tiles text over content, with a composable two-part API
Installation
- $npx litefy@latest add watermark
- $pnpm dlx litefy@latest add watermark
- $yarn dlx litefy@latest add watermark
- $bun --bun litefy@latest add watermark
Usage
Wrap any content with Watermark; a tiled text watermark is drawn over it.
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).
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" or any custom CSS color string.
Composable Components
WatermarkRoot
The watermark container; it provides the positioning context the canvas fills.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"div"> | - | Supports all native div props |
WatermarkCanvas
The canvas that draws the tiled watermark text; its parent should be positioned, e.g. WatermarkRoot.
| 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.