121 Pro components and page blocks

Get Pro
uibrik

Updated

Wax Seal

Pro

Preview

Customize

Color
Size68px
Speed1.00×
Width380px

Installation

Pro

Wax Seal is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/wax-seal

Usage

import { WaxSeal } from "@/components/uibrik/wax-seal/wax-seal";​const details = [  { label: "Parties", value: "Northwind × Acme" },  { label: "Term", value: "12 months" },  // …1 more];​<WaxSeal  color="#961e1e"  monogram="A"  size={68}  speed={1}  undo  width={380}  defaultSealed={false}  title="Service agreement"  subtitle="PDF · 3 pages"  details={details}  signer="Alex Morgan"  label="Seal"  onSealedChange={(sealed) => {}}  onSign={(signature) => {}}  // sealed={false}/>

Where to use Wax Seal

  • Contract signing

    A seal makes accepting an agreement feel final and deliberate.

  • Approvals

    Sign-offs on budgets, releases or reviews get a moment of weight.

  • Certificates

    Issuing a certificate or credential ends on a real seal.

Props

WaxSeal
color
Type string
"#961e1e"
Colour of the wax.
monogram
Type string
"A"
One or two letters struck into the seal.
size
Type number
68
Diameter of the seal.
speed
Type number
1
Playback speed of the sealing.
undo
Type boolean
true
Offer an Undo for a few seconds after sealing.
width
Type number
380
Width of the card.
sealed
Type boolean
–
Whether the document is sealed (controlled). Pair with onSealedChange.
defaultSealed
Type boolean
false
Sealed at the start when uncontrolled.
onSealedChange
Type (sealed: boolean) => void
–
Called with true when the seal is set, and false on undo.
title
Type string
"Service agreement"
Document title.
subtitle
Type string
"PDF · 3 pages"
Line under the title.
details
Type WaxSealDetail[]
SAMPLE_DETAILS
Rows of the document summary.
signer
Type string
"Alex Morgan"
Name on the signature line.
onSign
Type (signature: string) => void
–
Called as sealing starts, with the signature as a PNG data URL.
label
Type string
"Seal"
Label of the seal button.
className
Type string
–
Classes for the card.