Componentticket-stub0.57 KB gzipZero dependencies

Postmark

Circular postal cancellation stamp with wavy lines, city and date arcs that stamps in on mount.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add postmark

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { Postmark } from "@/components/ui/postmark";

<Postmark city="SPRINGFIELD" date="09/05/2026" serial="4211" />

Usage guidance

Use Postmark when a ticket stub surface needs Circular postal cancellation stamp with wavy lines, city and date arcs that stamps in on mount. Keep props minimal and prefer composition with sibling stubs.

Avoid Postmark for long form flows or dense data grids where a dedicated layout block fits better.

Source code

postmark.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface PostmarkProps {
  city: string;
  date?: string;
  serial?: string;
}

export function Postmark({ city, date = new Date().toLocaleDateString(), serial }: PostmarkProps) {
  return (
    <svg
      className="relative size-20"
      viewBox="0 0 100 100"
      fill="none"
    >
      <g stroke="currentColor" strokeWidth={1} strokeOpacity={0.85}>
        {Array.from({ length: 8 }, (_, i) => {
          const angle = (i / 8) * Math.PI * 2;
          const radius = 40;
          const x = 50 + Math.cos(angle) * radius;
          const y = 50 + Math.sin(angle) * radius;
          return <path key={i} d={`M 50 50 L ${x} ${y}`} />;
        })}
      </g>

      <text
        x={50}
        y={70}
        textAnchor="middle"
        fontFamily="monospace"
        fontSize={8}
        fill="currentColor"
        opacity={0.85}
      >
        {date}
      </text>

      <text
        x={50}
        y={85}
        textAnchor="middle"
        fontFamily="monospace"
        fontSize={7}
        fill="currentColor"
        opacity={0.7}
      >
        {city}
      </text>

      <g fill="currentColor" opacity={0.9}>
        <circle cx={20} cy={20} r={3} />
        <circle cx={80} cy={20} r={3} />
        <circle cx={20} cy={80} r={3} />
        <circle cx={80} cy={80} r={3} />
      </g>
    </svg>
  );
}

Props

Prop	Type	Description
city	string
date?	string
serial?	string