Gift Voucher Composer
Pick an amount, write a line, and the voucher is on the table as you type — a perforated bond-paper ticket with the amount cropped by its own edge and a serial that never changes under you.
- Category
- Components
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
KC-EEBE-10A0
From —Kiln & Crumb
Your message sits here.
Props
"use client";
import { useId, useState } from "react";
/**
* GiftVoucherComposer — choose an amount, write a line, and the voucher is
* there on the table as you type.
*
* Cafés, salons and restaurants sell more vouchers than they think, and the
* buying page is usually a form with a picture of a gift card at the end. Here
* the voucher is the page: a bond-paper ticket with a perforated stub, the
* amount set enormous and cropped by the ticket's own edge, a serial in
* monospace, and the message in the buyer's own words. Every keystroke lands
* on the ticket.
*
* THE OBJECT IS TWO HALVES. A real voucher is a ticket cut in two: the stub
* (issuer, serial, fine print) and the part you redeem (amount, names,
* message). The perforation between them is drawn — a dashed rule with a
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
A café or salon sells more vouchers than it expects to, especially in December, and the buying page is nearly always a form with a picture of a gift card at the end of it. This composer makes the voucher the page. Beside a short form sits the ticket itself, on the table, and every keystroke lands on it: the names, the message in the buyer's own words in a serif, and the amount set enormous and cropped by the ticket's own edge. The object is two halves. A saturated stub carries the issuer, the serial and the fine print, and a drawn perforation with die-cut notches separates it from the half you redeem, which is what stops it reading as a rounded card with a shadow. The fields are hard-capped because the object has fixed proportions: sixty characters of message, three digits of amount. The serial is a pure hash of the recipient, the sender and the sum, so the server and the client always agree and it never changes under the buyer. Submitting hands the details to your checkout.
Curator’s note
The perforation is the whole object. Take it away and the voucher goes back to being a rounded rectangle with a gradient, which is what every gift-card page already has.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Booking Slot Picker
componentsPick a day, pick a time, confirm — with honest availability, a real keyboard grid, and a WhatsApp or email request mode for shops with no booking system.
Service Price Ledger
sectionsA price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
Final Call Section
sectionsThe closing spread of a trade site: an oversized two-tier ask cropped by the edge, a two-field enquiry line with one filled button, and a ledger of the four things customers ring to check.