Receipt Tiers

Pricing 26

About

A pricing section that renders subscription plans as torn-edge thermal receipts, complete with dashed rules, dotted leaders, and a rubber-stamp badge for a featured tier.

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

Code

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

Usage.tsx

import ReceiptTiers from "@/components/ui/receipt-tiers";
import type { Plan } from "@/components/ui/receipt-tiers-utils/types";

const plans: Plan[] = [
  {
    id: "starter",
    name: "Starter",
    tagline: "For small crews shipping light loads",
    price: { monthly: 19, annual: 15 },
    cta: "Get Started",
    features: ["5 Projects", "Basic Analytics", "Email Support"],
  },
  {
    id: "growth",
    name: "Growth",
    tagline: "For teams scaling their operations",
    price: { monthly: 49, annual: 39 },
    cta: "Upgrade Now",
    badge: "Popular",
    features: [
      "Unlimited Projects",
      "Advanced Analytics",
      "Priority Support",
      "Team Roles",
    ],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    tagline: "For fleets that need custom manifests",
    price: null,
    cta: "Contact Sales",
    features: [
      "Dedicated Manager",
      "Custom Contracts",
      "SLA Guarantee",
      "SSO & Audit Logs",
    ],
  },
];

export default function ReceiptTiersDemo() {
  return (
    <div className="w-full min-h-screen flex items-center justify-center bg-background p-6">
      <ReceiptTiers
        eyebrow="Pricing"
        heading="Choose Your Plan"
        subheading="Simple pricing, no surprises on the bill"
        plans={plans}
        className="max-w-5xl"
      />
    </div>
  );
}