Preview live, install via shadcn or copy the source.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| plans | InvoicePlan[] | — | Yes | Billing plans (e.g. quarterly/yearly) with monthlyPrice, totalPrice, badge. |
| features | InvoiceFeature[] | — | No | Perk list displayed left of the receipt. |
| eyebrow | React.ReactNode | — | No | Small eyebrow above the title. |
| title | React.ReactNode | — | No | Main heading (first line). |
| titleAccent | React.ReactNode | — | No | Accent second line of heading. |
| receiptTitle | string | — | No | Receipt header title (e.g. REFRAME / UI). |
| receiptSubtitle | string | — | No | Receipt subtitle. |
| receiptMeta | ReceiptMeta | — | No | Meta row: date, time, receiptNo, reg, itemsCount. |
| itemTitle | string | — | No | Line-item title. |
| itemSubtitle | React.ReactNode | — | No | Line-item description. |
| ctaHref | string | — | No | CTA link href. |
| ctaLabel | string | ((plan: InvoicePlan) => string) | — | No | CTA label or function of selected plan. |
| ctaSlot | React.ReactNode | — | No | Custom CTA node (overrides ctaHref/label). |
| defaultPlanId | string | — | No | Initial selected plan id. |
| value | string | — | No | Controlled selected plan id. |
| onValueChange | (id: string) => void | — | No | Called when plan changes. |
| barcodeText | string | ((plan: InvoicePlan, meta: ReceiptMeta) => string) | — | No | Barcode caption. |
| className | string | — | No | Wrapper class for the section. |
| withPerks | boolean | true | No | Show perks column. |
| showTransitionBar | boolean | true | No | Show bottom black rounded bar. |