shadcn.io is not affiliated with official shadcn/ui
Watermark File Upload Block for React
A watermark panel on a drawn proof: type the text, pick one of nine positions on a 3 by 3 grid, set the opacity with a slider, tile it across the image, and copy the settings as JSON.
Installation
Overview
Put a mark on a client proof and see it before you export, with this watermark panel for React with Base UI. It is the proofing tool of Proofroom, for photographers. A drawn lake proof (sky, sun, hills and water) wears the watermark live. To the end sit the controls: a text Input, a 3 by 3 grid of native radios that picks where the text sits, from Top start to Bottom end, an opacity Slider from 5 to 100, and a Switch that tiles the text across the image at a slant. Copy settings puts the choice on the clipboard as JSON. A small File Upload zone under the proof names a picked file in the caption while the drawing stays. The panel is ruled by Guides. For photographers, print shops and any proofing gallery.
FAQ
What updates live?
The proof. Typing changes the mark's text, a grid choice moves it, the slider sets its strength, and the switch swaps the single mark for a tiled one. The status line says what changed, and the proof is the drawing at all times.
How does the position grid work?
It is nine native radios in a fieldset, drawn as dots, so the arrow keys move between them and a screen reader hears each position by name. The positions are start, centre and end across and top, middle and bottom down; the proof is drawn left to right, so start is on its left. Choosing one turns tiling off.
What does Copy settings copy?
A small JSON object with the text, the position (or "tile"), the opacity as a percentage and whether it tiles, ready to pass to your export code. Nothing else is copied.
What happens when I drop a file?
Its name and size go into the caption and the status line. The proof stays the drawing, because the block never reads a picked file. A file that is not an image is refused with a line in the status.
What stays local in the demo, and how do I wire it up?
All of it. No file is stamped, saved or uploaded. In your app draw the picked image to a canvas, draw the text with the chosen position and opacity (repeating it when tiled), and export the canvas, or send the settings to your server and stamp there.