Printer

Installation

Usage

1. Interactive Showcase Block

Render the full turnkey experience with preset template switcher tabs (Checkout, Invoice, Event Pass, API Key, Recap, Diploma, Coupon, Jam Demo):

import { Printer } from "@/components/jackui/blocks/printer/printer";

export default function Page() {
  return (
    <Printer 
      title="Order Confirmation"
      subtitle="Your transaction has been processed successfully."
      initialTemplate="checkout"
    />
  );
}

2. Individual Machine with Custom Card

Wrap any custom component inside PrinterMachine to trigger an authentic thermal printing animation while executing an async action (like charging a credit card or generating an API key):

import { 
  PrinterMachine, 
  Receipt 
} from "@/components/jackui/blocks/printer/printer";

export default function CheckoutPage() {
  const handlePayment = async () => {
    // Executes your async payment or server action:
    await processCheckoutPayment();
  };

  return (
    <PrinterMachine
      buttonLabel="Print"
      onPrint={handlePayment}
      minDuration={2400}
      size="md"
      soundEnabled={true}
    >
      <Receipt 
        storeName="SaaS Store"
        orderNumber="#ORD-8821"
        total={49.00}
      />
    </PrinterMachine>
  );
}

Real-World Use Cases

The Printer Block replaces standard loading spinners with a tactile, memorable physical moment:

• E-Commerce & SaaS Checkout: When a Stripe/PayPal payment resolves, dispense an itemized receipt with order details and a jagged torn paper boundary.
• Developer Tooling & API Key Minting: Display generated API keys and secrets with masked reveal toggles and instant 1-click clipboard copy.
• Event Passes & Conferences: Issue attendee passes with dynamic attendee names, event titles, and scannable SVG QR codes.
• Milestones & Year-In-Review: Viral achievements and annual metric summaries (Spotify Wrapped / Receiptify style) designed for screenshot sharing.
• Vouchers & Promotional Discounts: Reward customers with a perforated dashed coupon card containing unlockable promo codes.
• Physical POS Sync: Trigger on-screen confirmation synchronized with physical Bluetooth/USB thermal receipt printers.

Component Architecture

The block is built with a flat, modular folder structure inside components/jackui/blocks/printer/:

Props

Printer (Block Orchestrator)

PrinterMachine (Hardware Unit)