Pro
Approval stamp
Stamps a decision onto a document. The stamp drops from above at an angle, lands with a small squash that nudges the page, and leaves a slightly uneven ink mark: green to approve, red to reject.
pnpm dlx shadcn@latest add @caliper/approval-stampWhen to use
Use it for
- Approving expenses, invoices, contracts and timesheets.
- Review queues where the decision should feel final.
Skip it when
- Decisions that can change silently; show history with `AuditTrail`.
- Dense tables of approvals; use a status badge.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Styling
- Ink, not a sticker
- A noise mask gives the stamp an uneven print, and colour carries the decision with the word.
Usage
- Announced
- The decision and its note are a status message; the mark itself is decoration.
Installation
pnpm dlx shadcn@latest add @caliper/approval-stamp
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { ApprovalStamp } from "@/components/ui/approval-stamp"
The worked example comes with Pro
The 46-line example behind the preview opens here, ready to copy.
- 602 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
ApprovalStamp
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes status semantics, with aria-hidden kept in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Approval queueRequests waiting for a decision.
- ApprovalsCards that ask the user to allow or deny an action, with a risk label.
- Invoice detailAn issued invoice as the customer reads it: parties with tax ids, lines, discount, VAT or reverse charge, payments made and the balance, with copy link, email, download and pay.