Proposal twin

A React component in Beamline's Data & tables category.

A proposal edited beside the client's exact page, the two linked both ways: a field in focus lights its twin on the page, scrolls it into view and joins the two with a thread, a click on the page puts focus on its field, and a change glows once where it lands. The option the client chooses on their page (good, better, best) drives the items, the totals, the deposit rounded to the cent, the terms that come with it and the signature block. On a phone the two sides share one view with a switch.

Use it for

Agencies, installers, clinics, travel advisors and freelancers preparing an offer a client will open and accept.
The host owns the proposal and sending it; the part keeps the form and the client's page as one thing and works out the totals and the deposit.

Not for

Why a single total is this much, with levers → explainable-total.
A long contract document → document-viewer.

Anatomy

form: title, opening note, the option being edited (tabs) with its name, one line and its items (label, quantity, price each, remove), add an item, deposit %, terms one per line
client's page: the title, prepared for and valid until, the opening note, the options as cards (name, recommended, one line, total), the chosen option's items, subtotal, tax, total, deposit due on signing with its rule, the terms, the signature block
phone: Edit / Client's page switch
Send to <client>

States

rest
a field in focus (twin lit)
client's choice changed
no deposit
phone (one side at a time)
sending
sent

Keyboard

Tab walks the form; a field in focus lights its twin on the page
The client's options are radios on the page (Tab, Space or Enter); the owner's option tabs follow the client's choice

Motion

Totals roll (slot text); the chosen option's items slide as it changes (the shared FLIP); a change glows once on the page where it lands; the twin outline follows focus. Nothing runs at rest; reduced motion keeps the outline and drops the glow.

Props

Prop	Type	Default	Description
`value`	`Proposal`	—	Controlled: the proposal; omit to use defaultValue.
`defaultValue` (required)	`Proposal`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((proposal: Proposal) => void)`	—	Reports the selected value after a change; no callback by default.
`currency`	`string`	—	ISO code. Default USD.
`taxRate`	`number`	—	Tax on the subtotal: 0.08 for 8%. Omit for none.
`onSend`	`((proposal: Proposal) => void \| Promise<unknown>)`	—	Send it: the button names the client. A promise shows working until it settles.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "form" \| "options" \| "page" \| "sign" \| "totals", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultActive`	`string`	—	A twin linked at rest, without taking focus: its field and its place on the page are outlined and joined by the thread ("item:hosting", "total", "deposit", "intro", "option:good:label"). Focus anywhere moves the link.

Built from

Dependencies

lucide-react

Import

import { ProposalTwin } from "@beamline/proposal-twin";

Get it

Proposal twin is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Proposal twinComplete system · $49

A proposal edited beside the client's exact page, the two linked both ways.

Good, better, best for Harbor Coffee

Edit on the left, Harbor Coffee's page on the right, joined by a thread: the hosting line is linked as it opens. Focus a price and its line lights on the page; click anything on the page and its field takes focus. Choose Better on the page: the items, the total, the 30% deposit and the signature block follow.

0 × 0full

A treatment plan, no deposit

Two options and no deposit: the signature block says what is accepted, and nothing is drawn as $0.00 due.