Receipt Pricing

Component 148

About

Pricing section whose plans print like thermal receipts: monospace ledger with dot leaders, subtotal, months-free discount line, barcode, serrated edges. Switching monthly/yearly tears the slips off and reprints them. No animation library, theme tokens, keyboard-accessible.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Receipt Pricing to your project and fits it to your theme.

Code

How Receipt Pricing is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { ReceiptPricing, type ReceiptPlan } from "@/components/ui/receipt-pricing"

const PLANS: ReceiptPlan[] = [
  {
    id: "starter",
    name: "Starter",
    tagline: "One developer, one product",
    monthly: 12,
    cta: "Start free trial",
    items: [
      { label: "Seats", value: "1" },
      { label: "Events / mo", value: "100K" },
      { label: "Retention", value: "30 d" },
      { label: "Alerts", value: "5" },
    ],
  },
  {
    id: "team",
    name: "Team",
    tagline: "The whole product team",
    monthly: 32,
    featured: true,
    cta: "Start free trial",
    items: [
      { label: "Seats", value: "10" },
      { label: "Events / mo", value: "2M" },
      { label: "Retention", value: "12 mo" },
      { label: "Alerts", value: "Unlimited" },
      { label: "Slack support", value: "Incl." },
    ],
  },
  {
    id: "scale",
    name: "Scale",
    tagline: "Every team in the company",
    monthly: 96,
    cta: "Talk to sales",
    items: [
      { label: "Seats", value: "Unlimited" },
      { label: "Events / mo", value: "25M" },
      { label: "Retention", value: "3 yr" },
      { label: "SSO / SAML", value: "Incl." },
      { label: "Uptime SLA", value: "99.99%" },
    ],
  },
]

// The controls panel on 21st reads these defaults; the demo merges the visitor's values over them.
const settings = {
  monthsFree: 2,
  startYearly: false,
  showStamp: true,
  showBarcode: true,
  printMs: 460,
  merchant: "Meridian",
  headline: "Pricing, printed.",
  subline: "Every line item, the subtotal, and what you actually owe. Yearly reprints with two months off.",
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }

  return (
    <div className="bg-background flex min-h-[max(680px,100svh)] w-full flex-col items-center justify-center px-6 py-8">
      <ReceiptPricing
        key={String(s.startYearly)}
        plans={PLANS}
        defaultPeriod={s.startYearly ? "yearly" : "monthly"}
        merchant={s.merchant}
        merchantNote="Event analytics for product teams"
        orderPrefix="MD"
        monthsFree={s.monthsFree}
        printMs={s.printMs}
        showStamp={s.showStamp}
        showBarcode={s.showBarcode}
      >
        <div className="mx-auto mb-6 max-w-xl text-center">
          <h1 className="text-foreground text-4xl font-semibold tracking-tight text-balance sm:text-5xl">{s.headline}</h1>
          <p className="text-muted-foreground mx-auto mt-3 max-w-lg text-base text-pretty">{s.subline}</p>
        </div>
      </ReceiptPricing>
    </div>
  )
}