A light ticket-style receipt with notched edges, dashed tear lines and a scalloped bottom: tick service lines and the amount adds up before starting the project.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/service-receipt
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { ServiceReceipt } from "@/components/nextui/service-receipt";45export function Example() {6return (7<ServiceReceipt8brand="Acme Studio"9title="Service Receipt"10reference="000009852256"11date="May 12, 2026"12items={[13{ label: "NextUI Development", price: 1000 },14{ label: "Website Design", price: 1200, checked: true },15{ label: "Copywriting", price: 400 },16]}17onStart={(selected, total) => console.log(selected, total)}18/>19);20}
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Your Website" | Small line above the title |
| title | string | "Service Receipt" | Heading of the receipt |
| icon | ReactNode | ReceiptText icon | Icon in the round badge at the top |
| reference | string | "000085752257" | Reference number |
| date | string | "Mar 22, 2023" | Date shown next to the reference |
| items | ServiceReceiptItem[] | 2 sample lines | Lines with label, price and an optional starting checked flag; labels must be unique |
| format | (value: number) => string | whole US dollars | Formats prices and the amount |
| onChange | (checked: boolean[]) => void | – | Called with the ticked flags whenever a line is toggled |
| ctaLabel | string | "Start Project" | Button label |
| onStart | (selected: ServiceReceiptItem[], total: number) => void | – | Called with the ticked lines and their total when the button is pressed |
| className | string | – | Extra class on the root |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.