Brand

Watermark

Behind receipts, exported reports and screenshots that leave the building.

Receipt

৳ 120.00

Gulshan Car Park · 2h 10m · DHAKA METRO-GA 11-4821

watermark.tsx

"use client";

import { PoweredBy, Watermark } from "@waveinno/ui";

export default function WatermarkExample() {
  return (
    <div className="relative mx-auto max-w-sm overflow-hidden rounded-card border border-border bg-raised p-5">
      <Watermark opacity={0.07} />
      <p className="text-[11px] font-semibold uppercase tracking-[0.1em] text-muted">Receipt</p>
      <p className="disp mt-1 text-xl font-semibold text-text">৳ 120.00</p>
      <p className="mt-3 text-[12.5px] text-body">Gulshan Car Park · 2h 10m · DHAKA METRO-GA 11-4821</p>
      <PoweredBy className="mt-6" />
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { PoweredBy, Watermark } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<PoweredBy>

src/components/brand/waveinno-logo.tsx

Prop	Type	Default	Description
`product`	`string`	—	Product name as sold, e.g. "ParkingOS". Shown in capitals.
`icon`	`React.ReactNode`	—	The product's own mark, shown before its name.
`variant`	`"inline" \| "floating"`	`"inline"`
`position`	`keyof typeof corners`	`"bottom-left"`
`label`	`string`	`"powered by"`	Translated "powered by".
`className`	`string`	—

<Watermark>

src/components/brand/waveinno-logo.tsx

Prop	Type	Default	Description
`opacity`	`number`	`0.05`
`className`	`string`	—

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui