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.
"use client"
// Relative import on purpose: the 21st CLI rewrites it to the published path (`@/components/ui/<slug>`)
// and to a temporary path during `21st render`. An absolute "@/…" import breaks the render build.
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%" },
],
},
]
// Module-level `settings` + a default export that accepts them as props gives this demo a live
// controls panel on 21st.dev. Signature knobs first, then paper, then copy.
const settings = {
printMs: 460,
tearMs: 200,
stagger: 60,
monthsFree: 2,
startYearly: false,
toothWidth: 12,
toothDepth: 6,
grain: 0.05,
showStamp: true,
showBarcode: true,
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
// Remount when the starting period changes so the panel shows the printing entrance again.
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}
tearMs={s.tearMs}
stagger={s.stagger}
toothWidth={s.toothWidth}
toothDepth={s.toothDepth}
grain={s.grain}
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>
)
}