Seal Stamp: React + Tailwind Component

A square or round seal component — relief and intaglio carving, a stamping press animation, and ink bleed.

SVG recreates the carved-stone quality of a seal: a square or round outer frame with a 2x2 grid of vertically written characters arranged in the traditional reading order (top right, bottom right, top left, bottom left), supporting Raised seal script (zhuwen, relief — red characters) and Recessed seal script (baiwen, intaglio — a red field with the characters cut out). When stamping, the seal face presses down from above with a spring overshoot that adds a small shudder, and the ink bleed and mottled noise surface afterwards. The carving marks are generated from a deterministic seed, so the same inscription always carves the same seal.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/seal-stamp.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Seal texttext

Frame shapeshape

Carving stylesealStyle

Seal sizesize

160

Ink colorcolor

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<SealStamp/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/seal-stamp.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/seal-stamp.

Usage

import { SealStamp } from "@/components/ui/seal-stamp";

// Uncontrolled: click the seal to stamp, click again to lift it
<SealStamp text="Wang's Yun Qiao" shape="square" sealStyle="baiwen" />

Controlled usage, where the parent decides when the seal comes down (on a click of the paper, for example):

const [stamped, setStamped] = React.useState(false);

<div onClick={() => setStamped(true)}>
  <SealStamp
    text="Yun Qiao"
    shape="circle"
    sealStyle="zhuwen"
    stamped={stamped}
  />
</div>

The inscription supports 2–4 characters; anything beyond 4 keeps only the first 4. A two-character seal is centered automatically into a single vertical column, and a three-character seal puts two characters in the right column and one in the left.

Props

Prop	Type	Default	Description
`text`	`string`	—	The inscription (2–4 characters), in the traditional reading order: top right, bottom right, top left, bottom left
`shape`	`"square" \| "circle"`	`"square"`	Outer frame shape: square or round seal
`sealStyle`	`"zhuwen" \| "baiwen"`	`"zhuwen"`	Carving method: Raised seal script (relief — red characters on white) or Recessed seal script (intaglio — white characters cut out of a red field)
`stamped`	`boolean`	—	Controlled stamped state; when omitted, the component manages it internally
`defaultStamped`	`boolean`	`false`	Initial stamped state in uncontrolled mode
`onStamp`	`() => void`	—	Callback when the seal comes down
`size`	`number`	`96`	Seal face size (px), the same width and height
`color`	`string`	`"#c1272d"`	Ink color (cinnabar red by default)
`className`	`string`	—	Forwarded to the outer container

Accessibility

When it is interactive (uncontrolled, or controlled with onStamp provided) it renders as a native button, using aria-pressed to convey whether it has been stamped, with an aria-label reading out the full inscription and state
For display only (controlled with no onStamp) it renders as role="img", so assistive technology can read the inscription directly
When the user has "reduce motion" enabled at the system level, it becomes a plain fade in / fade out with no press bounce or rotation animation
The seal face SVG is hidden from assistive technology (aria-hidden); the semantics come from the outer element's labels

Seal Stamp