Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Send fold

A message that folds itself into a paper plane when sent. The card's contents fade, the paper folds to a dart and it flies off up and away; a short confirmation takes its place with a way to write another.

Pro
pnpm dlx shadcn@latest add @caliper/send-fold

Invite a teammate

They'll get an email with a link to join.

To dev.patel@northwind.io

Hi Dev, I've set up our workspace for the pricing project. Join when you have a minute and have a look at the draft.

Maya

Installs components/ui/send-fold.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion

When to use

Use it for

  • Invites, feedback, notes and postcards: messages that leave the product.
  • The one send in a flow worth celebrating.

Skip it when

  • Chat, where messages stay in the thread.
  • Sends that may fail later; fold only once it has gone.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Fold after success
Nothing folds until onSend resolves; a failure keeps the message open with the reason.

Usage

Focus follows
Focus moves to the confirmation, and back to Send for the next message.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/send-fold

Adds its 3 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.

example.tsx
import { SendFold } from "@/components/ui/send-fold"

The worked example comes with Pro

The 29-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
Checking your licence…

API reference

SendFold

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
children *ReactNode—The message as it will be sent: a note, an invite, a postcard.
onSend *() => void | Promise<void>—Sends it; the fold waits for this to finish, and an error keeps the message open.
sendLabelstring"Send"
sentLabelstring"Sent"What was sent, e.g. "Invite sent to maya@northwind.io".

Accessibility

It exposes alert and 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 checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Surfaces examples