Receipt

Receipt presents a successful ticket or payment confirmation in a compact, theme-aware ticket layout.

Preview

import { Receipt } from "@/registry/spark-ui/receipt";

export default function ReceiptDemo() {
  return (
    <Receipt
      title="Thanks for using Spark UI!"
      description="Your next polished interface starts here."
      ticketId="SPARK-UI-001"
      amount="$0.00"
      dateTime="14 Jul 2026 · 22:42"
      cardholder="Spark UI"
      cardLastFour="2026"
      barcodeValue="SPARK UI 2026"
    />
  );
}

Thanks for using Spark UI!

Your next polished interface starts here.

Ticket ID

SPARK-UI-001

Amount

$0.00

Date & Time

14 Jul 2026 · 22:42

Spark UI

•••• 2026

SPARK UI 2026

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/receipt.json

Usage

import { Receipt } from "@/components/receipt";

export default function ReceiptDemo() {
  return (
    <Receipt
      title="Thanks for using Spark UI!"
      description="Your next polished interface starts here."
      ticketId="SPARK-UI-001"
      amount="$0.00"
      dateTime="14 Jul 2026 · 22:42"
      cardholder="Spark UI"
      cardLastFour="2026"
      barcodeValue="SPARK UI 2026"
    />
  );
}

Properties

Prop	Type	Default	Description
`ticketId`	`string`	`—`	Ticket or transaction identifier.
`amount`	`string`	`—`	Formatted payment amount.
`dateTime`	`string`	`—`	Formatted issue date and time.
`cardholder`	`string`	`—`	Name shown in the payment row.
`cardLastFour`	`string`	`—`	Last four digits of the payment card.
`barcodeValue`	`string`	`ticketId`	Text displayed beneath the decorative barcode.
`title`	`string`	`"Thank you!"`	Receipt heading.
`description`	`string`	`"Your ticket has been issued successfully"`	Receipt supporting message.
`successIcon`	`ReactNode`	`"🎉"`	Icon displayed above the heading.
`className`	`string`	`—`	Additional CSS classes.