Component reference
Watermark
A repeated visual mark on document content.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Invoice 2026-042
Pimolu Studio · 14 May 2026
Design system audit, component library maintenance and documentation. This preview is watermarked for internal review only.
Width adapts to the available space
"use client";
import {
Watermark,
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
Badge
} from "@pimolu/react";
export function DemoExample() {
return (
<Watermark text="CONFIDENTIAL">
<Card>
<CardHeader>
<CardTitle>Invoice 2026-042</CardTitle>
<CardDescription>Pimolu Studio · 14 May 2026</CardDescription>
</CardHeader>
<CardContent>
<p className="max-w-prose leading-relaxed">
Design system audit, component library maintenance and
documentation. This preview is watermarked for internal review
only.
</p>
</CardContent>
<CardFooter>
<Badge variant="primary">€ 4,800.00</Badge>
<Badge variant="secondary">Paid</Badge>
</CardFooter>
</Card>
</Watermark>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Draft manuscript
A draft manuscript composition using Watermark.
Pricing worksheet
A pricing worksheet composition using Watermark.
Image
An image URL or data URL repeats as the tile. The gap sets the tile size in this mode.
Usage
Watermarks are decorative attribution, not a security mechanism or access control.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluWatermarkProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
text | string | undefined | — | Repeated text. Ignored when `image` is set. |
image | string | undefined | — | Repeated image URL or data URL. Takes precedence over `text`. |
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
opacity | number | undefined | 0.08 | Layer opacity between 0 and 1. Defaults to 0.08. |
rotate | number | undefined | -20 | Rotation in degrees. Defaults to -20. |
gap | number | undefined | 80 | Space between text tiles in CSS pixels. In image mode it sets the square tile size. Defaults to 80. |
fontSize | number | undefined | 14 | Font size of the text tile in CSS pixels. Defaults to 14. |
color | string | undefined | #64748b | CSS colour of the text tile. Defaults to #64748b. |
fontFamily | string | undefined | "system-ui, -apple-system, 'Segoe UI', sans-serif" | Public Pimolu prop; see the source declaration for details. |
fullscreen | boolean | undefined | false | Cover the whole viewport instead of the component box. |
zIndex | number | undefined | — | Stacking order of the watermark layer. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
style | CSSProperties | undefined | — | Public Pimolu prop; see the source declaration for details. |
textstring | undefinedNo default extracted.
Repeated text. Ignored when `image` is set.
imagestring | undefinedNo default extracted.
Repeated image URL or data URL. Takes precedence over `text`.
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
opacitynumber | undefinedDefault: 0.08
Layer opacity between 0 and 1. Defaults to 0.08.
rotatenumber | undefinedDefault: -20
Rotation in degrees. Defaults to -20.
gapnumber | undefinedDefault: 80
Space between text tiles in CSS pixels. In image mode it sets the square tile size. Defaults to 80.
fontSizenumber | undefinedDefault: 14
Font size of the text tile in CSS pixels. Defaults to 14.
colorstring | undefinedDefault: #64748b
CSS colour of the text tile. Defaults to #64748b.
fontFamilystring | undefinedDefault: "system-ui, -apple-system, 'Segoe UI', sans-serif"
Public Pimolu prop; see the source declaration for details.
fullscreenboolean | undefinedDefault: false
Cover the whole viewport instead of the component box.
zIndexnumber | undefinedNo default extracted.
Stacking order of the watermark layer.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
styleCSSProperties | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Keep the mark from reducing text contrast or obstructing interaction.